Способ исправления фонового масштабирования в iPad Safari?

У меня есть веб-сайт с использованием огромного фонового изображения (2000x1500) в контейнере div (100% x 100%).

Когда я открываю этот сайт в Safari на iPad, он уменьшается (~ 40%) в другой пропорции, чем контент (~ 80%).

Я переместил фон в img-tag в div со 100% шириной и высотой 100% и настройкой переполнения "скрыто". Точно так же происходит.

Есть ли настройка CSS, которая может помочь Safari масштабировать фоновые изображения в той же пропорции, что и контент?

Ответы

Ответ 1

Вы должны создать отдельную таблицу стилей для iPad. Для этого вы можете использовать следующее:

<link rel="stylesheet" media="only screen and (max-device-width: 1024px)" href="../ipad.css" type="text/css" />

По этой ссылке вы найдете информацию о ориентации вашего сайта на iPad и о том, как с ним бороться.

Моим советом было бы создать отдельную таблицу стилей (css файл) для iPad-версии вашего сайта, независимо от того, что вы делаете, вы должны просто создать ее и добавить тег ссылки, как показано выше.

Если у вас есть фон с картинкой размером 2000x1500 пикселей для iPad, вы можете уменьшить его, чтобы он соответствовал iPad, если это единственное, с чем у вас возникла проблема. Я бы сказал, что вы должны уменьшить размер изображения до 1024 пикселей и объявить его в отдельной таблице стилей для iPad, и вы увидите конечный результат.

Сообщите мне, как это происходит.

Кстати, вы должны прочитать эту статью: http://www.inspiredm.com/2010/02/09/ipad-design/

Ответ 2

Добавление этого сработало для меня, когда у меня было фоновое изображение на фоновом холсте...

body{ -webkit-background-size: 2000px 1400px;}

Очевидно, нужно заменить размеры с правильным размером для изображения.

Ответ 3

Кажется, что эта проблема возникает только на iPad, когда у вас есть фоновое изображение, которое прикреплено к <body> тег. Если вы поместите фоновое изображение в содержащий div, проблема может быть решена - это отличная работа, если вам не нужно фиксировать фоновое изображение, так как методы фиксации фона в IE укажите, что вы используете <body> тег для изображений.

Вы можете видеть разницу в этих двух сайтах, первая использует <body> тег для позиционирования (из-за фиксированного позиционирования на фоновом изображении), а второй использует содержащий div:

http://www.mricsi.com http://www.collinshirsch.com

Надеюсь, что это поможет!

edit - это не совсем точно - кажется, что это так только в некоторых случаях, и причина, почему почему-то непонятна.

Ответ 4

У меня есть 5400x556 в качестве (прокрутки) фонового изображения в div. Как .jpg, он резко сокращается, как .png это хорошо. Единственная проблема теперь в том, что .png составляет 5 мегабайт. Grr.

Хороший вызов для отдельных таблиц стилей.

удача

Owen

Ответ 5

Я использую:

 body {min-width:2000px; min-height:1500px }

Ответ 6

Вы можете использовать решение @UXdesigner для создания отдельной таблицы стилей для iPad. Но вы можете использовать один оператор в текущей таблице стилей:

@media only screen and (max-device-width: 1024px){
  .yourClassname{
    max-width: 500px;
  }
}

и, конечно, для небольших устройств, таких как телефоны, которые вы можете использовать:

@media only screen and (max-device-width: 480px){
  .yourClassname{
    max-width: 100px;
  }
}

Обратите внимание, что эти предложения работают только в CSS3 (последние устройства все это принимают)