Сбросить масштаб / ширину / масштабирование 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

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

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

Answer 2

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

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

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

Answer 3

У меня были некоторые проблемы с изменением уровней масштабирования от альбомного до портретного, когда содержимое было больше, чем область просмотра. Установка «минимальный масштаб = 1,0», решил это для меня.

Answer 4

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

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

Answer 5

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

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

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

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

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

Answer 6

У меня тоже была эта проблема, я думаю. Попробуйте вставить «максимум-масштаб = 1,0» (и, возможно, «минимум-масштаб = 1,0», если вам так хочется) в тег окна просмотра. Это предполагает, что вы не хотите, чтобы пользователь мог масштабировать, хотя (а я нет)

Answer 7

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

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

С этот ответ :

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