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

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

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

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

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

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

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

10
iphone javascript viewport width zoom

7 ответов

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

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

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

8

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

попробуйте использовать медиа-запросы или крючок js (экран.ширина, etc) для того чтобы отрегулировать вашу конструкцию автоматически при изменении ориентации. Именно поэтому эти атрибуты доступны нам как разработчикам.

18

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

2

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

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

1

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

0

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

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

на эту должность, Андрей Ashbacher выложил ссылку на код автор: Scott Jehl:

/*! 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) и альт!

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

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

0

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

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

С ответ:

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

0