Уменьшить ширину области просмотра Mobile Safari, когда iPad находится в портретной ориентации? - - PullRequest
Новая
       29

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

14 голосов
/ 29 июня 2011

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

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

<meta name="viewport" content="width=1024px, initial-scale=1.0, maximum-scale=10.0" />

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

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

PS Я не могу использовать user-scalable=no.

Ответы [ 2 ]

14 голосов
/ 29 июня 2011

Вы даже можете добавить свойства ориентации в том же 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 ширина устройства всегда 768 пикселейнезависимо от ориентации ... Я знаю, что это сбивает с толку, но это так ...

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

3 голосов
/ 29 июня 2011

Вы можете использовать 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" />
...