Responsive Grid Breaking при просмотре на мобильном устройстве в альбомном формате

Question

Я создаю веб-сайт, используя ' 1140px Grid System ' Энди Тейлора.

Все хорошо в браузере Android, но на iPhone 3g в Safari при повороте в альбомнуюПредставление, содержимое сетки вытекает из области просмотра.Смотрите изображение ниже ...

Answer 1

У меня была похожая проблема, и я начал гуглить.Вышеупомянутое решение упоминается во многих блогах и статьях, но считается «лекарством, которое убивает пациента», потому что оно отключает масштабирование пользователя (пинч / зум) в iOS4 и iOS5.

Похоже, было разработано лучшее решениеFilament Group, которая временно отключает пользовательское масштабирование до тех пор, пока не произойдет изменение ориентации на ландшафт.

Управление размером текста в Safari для iOS без отключения масштабирования пользователя

Исправление для ошибки масштабирования iOS Orientationchange

Надеюсь, это поможет.

Answer 2

Я нашел ответ на этот вопрос:

Первоначально в заголовке у нас было это, чтобы установить масштаб области просмотра:

<meta name="viewport" content="width=device-width,initial-scale=1">

Однако, мой коллега обнаружил, что для устройств iOS вам нужно использовать следующее, которое устанавливает минимальный и максимальный масштаб для окон просмотра iOS:

 <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0"  />

Некоторые сведения об этой проблеме можно прочитать в хранилище HTML5 Boilerplate Github