Фотографии iPhone для iPhone

Просто интересно, если кто-то еще испытал iPad/iPhone, масштабируя их фоновые изображения, чтобы они соответствовали порт представления.

В моем случае я заменяю фоновые изображения через javascript, а новые фоновые изображения очень широки, чтобы соответствовать большим дисплеям. Тем не менее, iPad уменьшает фоновые изображения, которые добавляются в DOM через javascript. Я решил это, используя параметр "-webkit-background-size", установленный на размер, который должен быть на изображении, но это приводит к тому, что фоновое изображение будет растянуто и пикселировано.

Ответ 1

Это работало на iPad:

-webkit-background-size: length_x length_y;

Ответ 2

iphoneOS масштабирует каждое изображение с более чем 2 миллионами пикселей (ширина * высота) на 50% вниз. Мне удалось сфокусировать фон на две фотографии.

Ответ 3

Все, что вам нужно сделать, это добавить этот метатег на свои страницы, чтобы предотвратить масштабирование фонового изображения.

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

Ответ 4

Прежде всего, если вы экспортируете свое изображение в виде 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)
- изменить пейзаж устройства на портрет и наоборот без проблем