Масштабировать ширину видового экрана Mobile Safari, когда iPad находится в портретной ориентации? -

Я работаю над веб-сайтом, который призван работать лучше всего при просмотре в альбомном режиме на iPad. Все находится в контейнере <div> размером 1024px. Тем не менее, мне по-прежнему необходимо масштабировать окно просмотра, поэтому, когда пользователь превращает iPad в портретную ориентацию, пользователю не нужно уменьшать масштаб или прокручивать по горизонтали, чтобы увидеть все на странице.

В настоящее время у меня есть тег <meta> в моем <head>:

Все отображается хорошо, когда страница просматривается в ландшафтном режиме, но я не могу заставить вышеупомянутое требуемое поведение портрета работать. Я попытался изменить initial-scale на 0.75, и происходит полная противоположность: все вписывается в портретный режим, но есть дополнительное горизонтальное пространство, когда iPad находится в ландшафтном режиме.

Есть ли какой-либо CSS, Javascript или специальный параметр просмотра, который я могу использовать, чтобы заставить это работать?

Ответы

Ответ 1

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

@media only screen and (device-width:768px)and (orientation:portrait)
/*iPad Portrait orientation styles */

@media only screen and (device-width:768px)and (orientation:landscape)
/*iPad landscape orientation styles */

Снова вспомним iPad, ширина устройства всегда 768px, независимо от ориентации... Я знаю, что это сбивает с толку, но так, как это...

Вы также можете проверить очень хороший учебник по тому же на http://itunes.apple.com/in/app/designmobileweb/id486198804?mt=8

Ответ 2

Вы можете использовать ориентировочный CSS:

<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css">
<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css">

В этом случае вам, скорее всего, придется установить настройку видовых экранов на максимальную ширину устройств и позаботиться о фактической ширине содержимого с помощью CSS. Например, оберните все в div с соответствующей шириной для каждой ориентации, 1024px или 768px (за вычетом строки состояния и браузера Chrome).

<meta id="viewport" name="viewport" content="initial-scale=1.0;minimum-scale=1.0; maximum-scale=1.0" />