мобильное сафари: ротация устройств вызывает плохое масштабирование сайта

Question

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

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

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

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

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

спасибо!

Answer 1

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

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

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

Answer 2

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

<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 */**

Answer 3

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

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

через этот связанный вопрос: Как сбросить масштаб / масштаб веб-приложения при изменении ориентации на 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 , поэтому вам не нужно беспокоиться о проблемах с пространством имен.

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

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

РЕДАКТИРОВАТЬ: этот подход не всегда надежен, особенно когда вы держите Ipad под углом. Кроме того, я не думаю, что это событие доступно для ipads 1-го поколения