我正在显示不同的内容，具体取决于用户如何使用body标签中的onorientationchange调用来保持他/她的手机。这很有效 - 我隐藏了一个div，同时让另一个可见。
纵向模式下的div在首次加载时看起来很棒。我使用它来获得正确的比例/缩放：
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;" />
即使纵向模式中的内容结束，宽度也是正确的，用户可以向下滚动。横向模式下的显示也很完美。但是，如果横向模式中的内容要求用户向下滚动，那么当用户返回纵向模式时，屏幕会“缩小”以便说出来。无论用户是否在横向模式下向下滚动，都会发生这种情况。
我尝试了许多不同的东西来尝试获得正确的屏幕比例/缩放/宽度，但没有运气。有没有办法做到这一点？
提前致谢！
答案 0 :(得分：18)
上面接受的“答案”并不是真正的答案，因为不允许任何缩放与要求IE用户切换到另一个浏览器一样糟糕。可访问性很糟糕。您希望自己的设计不要做那些Apple在切换视图方向时认为理想的时髦缩放功能，但是您要让残疾用户黯然失色。非常不推荐。
尝试使用媒体查询或js挂钩（screen.width等）在方向更改时自动调整您的设计。这就是为什么这些属性作为开发人员向我们展示的原因。
答案 1 :(得分：8)
以下是我用来处理媒体查询缩放的内容：
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;">
最大规模是为我出售它的东西。这意味着iPhone上从纵向到横向的过渡非常流畅，完全没有缩放问题......
答案 2 :(得分：2)
当内容大于视口时，我在缩放级别从横向更改为纵向时遇到了一些问题。设置“minimum-scale = 1.0”，为我解决了这个问题。
答案 3 :(得分：1)
如果您在safari中运行Web应用程序，这不会起作用，但我认为如果您在自己的应用程序中使用UIWebView，它将会起作用。
我没有对此进行过测试，但是有一种简单的方法可以让你的javascript与代码的objective-c对话，此时你可以访问诸如缩放网页视图之类的内容。
答案 4 :(得分：0)
您可以在content属性中设置user-scalable属性。试试这个：
<meta name="viewport" content="width=device-width; initial-scale=1.0; user-scalable=no;">
来自this answer：
但如果您指定User-scalable = no，则表示网站不允许放大或缩小。
答案 5 :(得分：0)
我认为我也有这个问题。 尝试在视口标记中添加“maximum-scale = 1.0”（如果您愿意，可以使用“minumum-scale = 1.0”）。 这假设你不希望用户能够扩展（我没有）
答案 6 :(得分：0)
为此使用元标记不起作用。我已尝试过各种元标记和orientationchange和gesturechange事件的组合，我尝试了超时和各种花哨的javascript，然后我发现了这个：
https://github.com/scottjehl/iOS-Orientationchange-Fix
通过此相关问题：How do I reset the scale/zoom of a web app on an orientation change on the iPhone?
在这篇文章中，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事件，表明orientationchange即将发生。这是我见过的最好的解决方案，因为它实际上有效并且不会禁用缩放。