Мобильное сафари: вращение устройства приводит к плохому масштабированию веб-сайта

У меня есть мобильный сайт для iphone и ipad, где я отключу масштабирование пользователей с помощью

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

это прекрасно работает, пока сайт находится в ландшафтном режиме. ширина веб-сайта равна ширине экрана. то, если я поворачиваю устройство в портретный режим, он становится уменьшенным, чтобы он соответствовал новой (более короткой) ширине. это тоже нормально.

но затем, если я поверну его обратно в ландшафтный режим, он внезапно масштабируется примерно до 125%, что означает, что теперь возможна горизонтальная прокрутка, а масштабирование невозможно, так как изначально отключено.

как я могу вернуть его при 100% масштабировании при повороте назад в альбом?

спасибо!

Ответ 1

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

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

и посмотрите, сможете ли вы достичь того, что ищете.

Ответ 2

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

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

Затем вы можете задать масштаб масштабирования шрифта в вашем CSS следующим образом:

body {
    font-size: 1.5rem;
    line-height: 2.3rem;
    -webkit-text-size-adjust: 100%;
}
/* This prevents mobile Safari from freely adjusting font-size */**

Ответ 3

Использование maximum-scale и minimum-scale для остановки масштабирования действительно не работает, потому что тогда вы убираете способность пользователя увеличивать масштаб. Это действительно плохая идея, потому что это заставляет ваших пользователей злобно злиться, что ваш сайт не масштабируется, а другие сайты...

Я пробовал тайм-ауты и всевозможные фантазии javascript, тогда я нашел это: https://github.com/scottjehl/iOS-Orientationchange-Fix

через этот связанный вопрос: Как reset масштаб/масштабирование веб-приложения при изменении ориентации на iPhone?

На этом посту Эндрю Эшбахер разместил ссылку на код, написанный Скоттом Йеллом:

/*! A fix for the iOS orientationchange zoom bug. Script by @scottjehl, rebound by @wilto.MIT License.*/(function(m){if(!(/iPhone|iPad|iPod/.test(navigator.platform)&&navigator.userAgent.indexOf("AppleWebKit")>-1)){return}var l=m.document;if(!l.querySelector){return}var n=l.querySelector("meta[name=viewport]"),a=n&&n.getAttribute("content"),k=a+",maximum-scale=1",d=a+",maximum-scale=10",g=true,j,i,h,c;if(!n){return}function f(){n.setAttribute("content",d);g=true}function b(){n.setAttribute("content",k);g=false}function e(o){c=o.accelerationIncludingGravity;j=Math.abs(c.x);i=Math.abs(c.y);h=Math.abs(c.z);if(!m.orientation&&(j>7||((h>6&&i<8||h<8&&i>6)&&j>5))){if(g){b()}}else{if(!g){f()}}}m.addEventListener("orientationchange",f,false);m.addEventListener("devicemotion",e,false)})(this);

Это решение, которое хорошо переносится в IIFE, поэтому вам не нужно беспокоиться о проблемах с именами.

Просто добавьте его в script (не в document.ready(), если вы используете jQuery) и альта!

Все, что он делает, это отключить масштабирование на событиях devicemotion, которые показывают, что orientationchange неминуемо. Это лучшее решение, которое я видел, потому что оно действительно работает и не отключает масштабирование.

EDIT: этот подход не всегда надежный, особенно если вы держите ipad под углом. также, я не думаю, что это событие доступно gen 1 ipads