Мета вьюпорт ад

Я разработал адаптивный веб-сайт и создал прототип с помощью Compass Susy.

Проблема, с которой я сталкиваюсь в Mobile Safari на iPad и iPhone, заключается в том, что когда я загружаю сайт в портретном режиме, а затем поворачиваю его в ландшафтный режим, весь макет сдвигается, возможно, на 30% вправо (он также увеличивает масштаб, чтобы соответствовать размеру экрана). ширина альбомной ориентации 480 пикселей).

Я пробовал несколько вещей и заметил, что при изменении метатега области просмотра с <meta content="width=device-width, initial-scale=1" name="viewport"> на <meta content="width=device-width" name="viewport"> (удаление начального масштаба) скачок не происходит.

Однако без этого свойства макет моего телефона слишком мал, даже при первоначальном портретном виде. Слева вровень с желобом справа, в обоих направлениях.

Я попытался увеличить столбцы в сетке Susy, и хотя это явно делает макет шире на других платформах, на телефоне все еще уменьшается масштаб, чтобы показать желоб справа. Так что это какая-то проблема с окном просмотра.

С начальным набором масштаба на Android он подходит, при повороте в альбомную он не прыгает, а остается 320px (с полями справа и слева).

Что мне нужно сделать здесь?


mobile-safari media-queries viewport device-orientation compass-sass
person Steve    schedule 21.06.2012    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Я постараюсь не быть слишком расплывчатым, не зная, как настроена структура вашего html... Но вы можете попробовать выполнить следующие шаги и сообщить мне, работает ли это:

  1. Используйте предоставленный код Lokase, но удалите часть «user-scalable=0».
  2. Оберните все в своем теге в два пустых элемента div. Первый дает "id='x'", второй дает "class='resizer'". Не забудьте теги в конце.
  3. Добавьте в таблицу стилей следующее: div:firstchild div.resizer { width:100% } #x {display:block}

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

Это своего рода лажа, но это сработало на мобильном сайте, который я недавно сделал для клиента.

person Spartacus    schedule 23.06.2012

arrow_upward
0
arrow_downward

Попробуй это:

<meta name="HandheldFriendly"   content="True">
<meta name="MobileOptimized"    content="320">
<meta name="viewport"           content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
person Lowkase    schedule 22.06.2012
comment
Я попробую, но я бы хотел, чтобы пользователь по-прежнему щипал и масштабировал. - person Steve; 23.06.2012