Как ограничить масштабирование веб-страницы, чтобы растянуть, когда iPhone и Android в альбомной ориентации?

Question

Как ограничить масштабирование веб-страницы, чтобы растянуть, когда iPhone и Android в альбомной ориентации?

Когда я поворачиваю iphone в альбомную ориентацию, заголовок занимает 30% пространства на экране, но в портретном режиме он занимает только15%.

Придется ли мне писать разные CSS для некоторых элементов в альбомной ориентации?

Answer 1

Вы можете использовать метатег viewport, , как описано в Mozilla . Документация Apple по для разработки веб-контента для iPad также довольно хорошо описывает этот тег. Apple рекомендует:

<meta name="viewport" content="width=device-width" />

EDIT:

В вашем случае вы можете попробовать это:

<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=0, width=device-width;">

Вы можете попробовать использовать технику, упомянутую здесь , чтобы использовать разные таблицы стилей для разных ориентаций.

Answer 2

Попробуйте добавить webkit css

body {
    -webkit-text-size-adjust:none;
}

Это в основном останавливает настройку размера шрифта при переходе в альбомную ориентацию.

Используйте с осторожностью, потому что, если вы разрешите чтение этого CSS-файла клиентом Safari для настольного компьютера, тогда любая попытка масштабирования пользователя не повлияет на размеры шрифта.