Устранение неполадок при переключении из портретного режима в альбомный с использованием медиазапросов

Question

В настоящее время я начинаю использовать адаптивный подход к своим сайтам.Я нашел http://fluidbaselinegrid.com/, чтобы быть лучшим образцом для этого.Но с каждым шаблоном или сеткой, которые я пробовал, я не могу заставить iPhone или iPad распознавать медиазапросы при переключении из портретного в альбомный режим.

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

Вы даже можете увидеть, что это происходит на http://fluidbaselinegrid.com/.

Кто-нибудь знает, является ли это причудой с мобильным веб-набором, с которой мы должны жить сейчас, или есть способ исправить это?

Answer 1

Я связался с разработчиком за Fluid Baseline Grid и получил ответ:

Я думаю, что вы испытываете мета-тег viewport.

Текущий:

Максимальный масштаб не позволяет пользователю увеличивать / уменьшать масштаб с помощью пальца.Тем не менее, он предотвращает смещение макета, когда устройство меняется с книжного на альбомный.Это было намеренно удалено, чтобы помочь тем, у кого есть проблемы с чтением меньшего текста.Вы можете просто изменить метатег в голове, чтобы установить масштаб, который исправит проблему масштабирования при повороте из портретного в ландшафтное.

"Если веб-разработчикам нужны настройки масштабачтобы оставаться неизменным при переключении ориентаций на iPhone, они должны добавить значение максимального масштаба, чтобы предотвратить это масштабирование, что имеет иногда нежелательный побочный эффект, мешающий пользователям увеличивать масштаб »- http://hacks.mozilla.org/2010/05/upcoming-changes-to-the-viewport-meta-tag-for-firefox-mobile/

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

Answer 2

Я решил добавить только 'initial-scale = 1' (а не 'Maximum-Scale = 1') к метатегу области просмотра