Создайте сайт iPhone, который регулирует размер рендеринга для портрета и пейзажа. - PullRequest
Новая
       31

Создайте сайт iPhone, который регулирует размер рендеринга для портрета и пейзажа.

5 голосов
/ 09 августа 2010

Я создаю простой мобильный веб-сайт для рендеринга специально на iPhone.Я исследовал настройку области просмотра, чтобы сайт был зафиксирован на 100%. До сих пор я обнаружил, что размеры 

Portrait: 320px
Landscape: 480px

Чтобы отобразить страницу в полном масштабе, я использовал следующий метатег вhtml 

<meta name="viewport" content="width=device-width; initial-scale=1; user-scalable=no" />

Это прекрасно работает в портретной ориентации, однако, когда iPhone поворачивается в альбомный режим, страница не изменяется соответствующим образом, вместо этого отображается увеличенное изображение.

Может кто-нибудь посоветовать, какисправить это поведение?

Ответы [ 2 ]

7 голосов
/ 09 августа 2010 
width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0
2 голосов
/ 09 августа 2010

Предположим, что ваш сайт упакован в контейнер, называемый # wrapper.

Мы можем установить ширину равной 100% и разрешить ее максимальное значение не более 480 пикселей. Вот так: 

#wrapper {
    width: 100%;
    max-width: 480px;
}

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

В HTML 

<body onorientationchange="someFunction()">

ИЛИ В Javascript 

window.onorientationchange = someFunction;
...