Сбросить масштаб / ширину / масштабирование Safari на iPhone с помощью JavaScript/onorientationchange

Question

Я показываю различный контент в зависимости от того, как пользователь держит свой телефон, используя вызов onorientationchange в теге body.Это отлично работает - я скрываю один div, делая другой видимым.

Div в портретном режиме отлично смотрится при первой загрузке.Я использую это, чтобы получить правильный масштаб:

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;" />

Даже если содержимое в портретном режиме растекается, ширина остается правильной, и пользователь может прокручивать страницу вниз.Отображение в альбомном режиме тоже идеально.Однако, если содержимое в альбомном режиме требует от пользователя прокрутки вниз, то, когда пользователь возвращается в портретный режим, экран, так сказать, "уменьшается".Это происходит независимо от того, прокручивал пользователь страницу вниз в альбомном режиме или нет.

Я перепробовал много разных способов, чтобы попытаться правильно настроить масштаб / зум / ширину экрана, но безуспешно.Есть ли какой-нибудь способ сделать это?

Заранее спасибо!

Answer 1

Вот что я использую для обработки масштабирования в моих медиа-запросах:

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

Максимальный масштаб - это то, что продало его для меня.Это означает, что переход от портретной к альбомной ориентации на iphone действительно плавный, без каких-либо проблем с масштабированием вообще...

Answer 2

Принятый выше "ответ" на самом деле не является ответом, поскольку запрещать какое-либо масштабирование вообще так же плохо, как просить пользователя IE переключиться на другой браузер.Это ужасно для доступности.Вы хотите, чтобы в вашем дизайне не было чрезмерного увеличения, которое Apple сочла идеальным при переключении ориентации просмотра, но вы оставляете пользователей с ограниченными возможностями в пыли.Настоятельно не рекомендуется.

Попробуйте использовать медиа-запросы или js-хук (screen.width и т.д.), Чтобы автоматически корректировать свой дизайн при смене ориентации.Вот почему эти атрибуты доступны нам как разработчикам.

Answer 3

У меня были некоторые проблемы с изменением уровня масштабирования с альбомной ориентации на портретную, когда содержимое было больше, чем видовой экран.Установив "minimum-scale = 1.0", я решил это для меня.

Answer 4

Это не сработает, если вы запускаете веб-приложение в safari, но я думаю, что это сработает, если вы используете UIWebView внутри своего собственного приложения.

Я не тестировал это, но есть простой способ заставить ваш javascript взаимодействовать со стороной кода objective-c, после чего у вас будет доступ к таким вещам, как масштабирование веб-представления.

Answer 5

Думаю, у меня тоже была эта проблема.Попробуйте поместить "максимальный масштаб = 1.0" (и, возможно, "минимальный масштаб = 1.0", если вам так хочется) в свой тег viewport.Это предполагает, что вы не хотите, чтобы пользователь мог масштабироваться, хотя (чего я не делаю)

Answer 6

Использование мета-тегов для этого не работает.Я перепробовал все комбинации мета-тегов и orientationchange и gesturechange возможные события, я попробовал тайм-ауты и все виды навороченного 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);

Это решение, красиво завернутое в ИЖИЗНЬ так что вам не нужно беспокоиться о проблемах с пространством имен.

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

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

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

Answer 7

Вы можете установить user-scalable свойство в атрибуте содержимого.Попробуй это:

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

От этот ответ:

Но если вы назначаете User-scalable=no, это означает, что веб-сайт не позволяет увеличивать или уменьшать масштаб.