使用JavaScript / onorientationchange在iPhone上重置Safari的缩放/宽度/缩放
https://stackoverflow.com/questions/1430747
-
07-07-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russian题
我正在显示不同的内容，具体取决于用户如何使用body标签中的onorientationchange调用来保持他/她的手机。这很有效 - 我隐藏了一个div，同时让另一个可见。
纵向模式下的div在首次加载时看起来很棒。我使用它来获得正确的比例/缩放：
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;" />
即使纵向模式中的内容结束，宽度也是正确的，用户可以向下滚动。横向模式下的显示也很完美。但是，如果横向模式中的内容要求用户向下滚动，那么当用户返回纵向模式时，屏幕<！>“缩小<！>”;可以这么说。无论用户是否在横向模式下向下滚动，都会发生这种情况。
我尝试了许多不同的东西来尝试获得正确的屏幕比例/缩放/宽度，但没有运气。有没有办法做到这一点？
提前致谢！
解决方案
以下是我用来处理媒体查询缩放的内容：
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;">
最大规模是为我出售它的东西。这意味着iPhone上从纵向到横向的过渡非常流畅，完全没有缩放问题......
其他提示
<！>“;回答<！>”;上面接受的并不是真正的答案，因为不允许任何缩放与要求IE用户切换到另一个浏览器一样糟糕。可访问性很糟糕。您希望自己的设计不要做那些Apple在切换视图方向时认为理想的时髦缩放功能，但是您要让残疾用户黯然失色。非常不推荐。
尝试使用媒体查询或js挂钩（screen.width等）在方向更改时自动调整您的设计。这就是为什么这些属性作为开发人员向我们展示的原因。
当内容大于视口时，我在缩放级别从横向更改为纵向时遇到了一些问题。设置<！> quot; minimum-scale = 1.0 <！>“，为我解决了这个问题。
如果您在safari中运行Web应用程序，这将不起作用，但我认为如果您在自己的应用程序中使用UIWebView，它将起作用。
我没有对此进行过测试，但是有一种简单的方法可以让你的javascript与代码的objective-c对话，此时你可以访问诸如缩放网页视图之类的内容。
我认为我也有这个问题。 尝试输入<！> quot; maximum-scale = 1.0 <！>; （可能是<！> quot; minumum-scale = 1.0 <！>;如果您愿意的话）在视口标记中。 这假设你不希望用户能够扩展（我没有）
为此使用元标记不起作用。我已经尝试过各种meta标签和orientationchange和gesturechange事件的组合，我尝试了超时和各种花哨的javascript，然后我发现了这个：
https://github.com/scottjehl/iOS-Orientationchange-Fix
通过这个相关的问题：如何在iPhone上的方向更改时重置Web应用程序的缩放/缩放？
在这篇文章中，Andrew 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);
这是一个很好的解决方案，包含在 IIFE 所以你不必担心名称空间问题。
只需将其放入您的脚本（如果您使用的是jQuery，则不要进入document.ready()）和中提琴！
所有这一切都是禁用放大devicemotion事件，表明<=>即将来临。这是我见过的最好的解决方案，因为它实际上有效并且不会禁用缩放。
您可以在content属性中设置user-scalable属性。试试这个：
<meta name="viewport" content="width=device-width; initial-scale=1.0; user-scalable=no;">
来自这个答案：
但如果您指定User-scalable = no，则意味着网站不允许放大或缩小。
