Я создал отзывчивый сайт, используя Twitter Bootstrap здесь: http://zarin.me/cce/
Отзывчивый дизайн отлично работает на iPad и iPhone, однако, когда я переворачиваю устройство с портрета на пейзаж, сайт масштабируется, а не адаптируется к экрану (сжимает экран).
Что мне не хватает? Это проблема с просмотром? Здесь единственный код окна просмотра, который у меня есть:
<meta content="width=device-width, initial-scale=1.0" name="viewport">
Спасибо заранее!
Вы также хотите добавить максимальный масштаб
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
При настройке максимальной шкалы на "1" она работает, она не позволяет пользователям увеличивать масштаб на любом месте вашего сайта. Не идеально подходит для пользователей. Вместо этого попробуйте этот Javascript, Исправление изменения iOS-ориентации
Установите initial-scale=1.0 в мета:
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
Затем установите -webkit-text-size-adjust:100%; в CSS:
body {
-webkit-text-size-adjust: 100%;
}
Этот подход не мешает пользователю изменять масштаб вашего веб-сайта, но гарантирует, что текст не получит размер, автоматически настроенный браузером.
Я видел, как это происходит, когда один из контейнеров на странице выпадает на 100%. На начальной странице отображается ок., Но при изменении ориентации дополнительная ширина становится как бы сильной, заставляя страницу масштабироваться, и обычно оставляет поле справа или слева. Стоит проверить все ваши медиа-запросы, чтобы убедиться, что нет каких-либо отступов или полей.
Следующее работает для меня и позволяет пользователям увеличивать
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0" />
Именно эта проблема возникла на Ipad 3 и IOS 7.1.2
Использование max-scale = 1 фиксировало его и позволяет масштабировать
Решение js не работает
Если вы столкнулись с проблемой в основном в iPhone-X, попробуйте - Это работает для меня.