Ответ 1
Это работало на iPad:
-webkit-background-size: length_x length_y;
Просто интересно, если кто-то еще испытал iPad/iPhone, масштабируя их фоновые изображения, чтобы они соответствовали порт представления.
В моем случае я заменяю фоновые изображения через javascript, а новые фоновые изображения очень широки, чтобы соответствовать большим дисплеям. Тем не менее, iPad уменьшает фоновые изображения, которые добавляются в DOM через javascript. Я решил это, используя параметр "-webkit-background-size", установленный на размер, который должен быть на изображении, но это приводит к тому, что фоновое изображение будет растянуто и пикселировано.
Это работало на iPad:
-webkit-background-size: length_x length_y;
iphoneOS масштабирует каждое изображение с более чем 2 миллионами пикселей (ширина * высота) на 50% вниз. Мне удалось сфокусировать фон на две фотографии.
Все, что вам нужно сделать, это добавить этот метатег на свои страницы, чтобы предотвратить масштабирование фонового изображения.
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
Прежде всего, если вы экспортируете свое изображение в виде 32-битного png (я использую Fireworks для этого), и используйте этот png в фоновом режиме вместо jpg файла, IOS не будет масштабировать изображение. Работает как шарм, а размер примерно такой же, как у jpg со 100% качеством (немного меньше на самом деле)
Кроме того, чтобы улучшить опыт работы с ipad/iphone, вы должны:
a) установите min с тегом body (мой обычно равен 980px)
body {
min-width: 980px;
}
b) установите ту же ширину в метатег viewport
<meta name="viewport" content="width=980px">
Пользователи теперь должны иметь возможность:
- см. дизайн, как вы его создали
- масштабировать контент (который они не могли бы использовать, если вы использовали "начальный масштаб = 1, максимальный масштаб = 1" в метатеге viewport)
- изменить пейзаж устройства на портрет и наоборот без проблем