使用JavaScript/onorientationchange重置iPhone上Safari的缩放/宽度/缩放

根据用户如何使用body标签中的onorientationchange通话来手持手机，我会显示不同的内容。这非常有效-我隐藏了一个div，同时使另一个可见

第一次加载时，纵向模式下的div看起来很棒。我使用此选项获得正确的缩放比例：

即使纵向模式下的内容被覆盖，宽度也是正确的，用户可以向下滚动。横向模式的显示也很完美。但是，如果横向模式下的内容需要用户向下滚动，那么当用户返回纵向模式时，屏幕可以说是“缩小”了。无论用户是否在横向模式下向下滚动，都会发生这种情况

我尝试了很多不同的方法来获得正确的屏幕比例/缩放/宽度，但没有成功。有没有办法做到这一点

---

提前谢谢

如果您在safari中运行web应用程序，这将不起作用，但我认为如果您在自己的应用程序中使用UIWebView，这将起作用

---

我还没有测试过这一点，但是有一种简单的方法可以让javascript与代码的objective-c端对话，此时您可以访问web视图的缩放等内容。

您可以在content属性中设置

user scalable

属性。试试这个：

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

发件人：

但如果您指定用户可缩放=否，则表示网站不允许放大或缩小

---

我想我也有这个问题。 尝试在视口标记中添加“最大比例=1.0”（如果您愿意，还可以添加“最小比例=1.0”）。

---

这假设您不希望用户能够缩放（我不希望）

以下是我用来处理媒体缩放查询的方法：

---

最大规模就是为我出售它的东西。这意味着在iphone上从纵向到横向的过渡非常顺利，根本没有缩放问题……

当内容大于视口时，从横向到纵向的缩放级别变化时，我遇到了一些问题。设置“最小比例=1.0”，为我解决了这个问题。

上面接受的“答案”并不是一个真正的答案，因为不允许任何缩放就像要求IE用户切换到另一个浏览器一样糟糕。这对可访问性很糟糕。你想让你的设计不做苹果公司认为在切换视图方向时最理想的时髦的缩放动作，但你却让残疾用户束手无策。强烈不推荐

---

尝试使用媒体查询或js挂钩（screen.width等）在方向更改时自动调整设计。这就是为什么这些属性作为开发人员向我们公开。

为此使用元标记是行不通的。我尝试了元标记和

orientationchange

和

gesturechange

事件的各种组合，我尝试了超时和各种花式javascript，然后我发现：

通过这个相关问题：

在那篇帖子上，安德鲁·阿什巴赫（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);

/*！iOS方向更改缩放错误的修复程序。脚本由@scottjehl编写，反弹由@wilto.MIT License.*/（函数（m）{if（！（/iPhone | iPad | iPod/.test（navigator.platform）和&navigator.userAgent.indexOf（“AppleWebKit”）>-1）{return var l=m.document；if（！l.querySelector）{ret var n=l.querySelector（“meta[name=viewport]”，a=n&&n.getAttribute（“content”），k=a+“，最大刻度=1”，d=a+”，最大刻度=10”“内容”，d；g=真的）函数b（）{{函数b（）{函数b（）{函数b（）{函数b（）{函数b（）{n.Set属性（内容），d；g=真的）函数b（）{{n.Set属性（内容），k；g=假}函数e（o）函数e（o）函数e（o）函数e（o）函数e（o）函数e（o）函数（o）e（o）（c）（c）（c）（c）（c）（c）（c）（c）（c）（i）（c）（c）（c）（c）（c）（c）（c）（c）（c）（c）（c）（g）（c）（c）（g）（g）（c）（g）函数）函数）函数）函数（c（c（c）若（c）若（g）若（g）若（g）若（g）若（g）若（g）若（g）若（g）若（g）若（g）若（g）若（g）若（g）若)；m.addEventListener（“设备运动”，e，false）}（本）；

这是一个包装得很好的解决方案，因此您不必担心名称空间问题

只需将它放入脚本（而不是

document.ready（）

，如果您使用的是jQuery）和viola

它所做的就是禁用缩放

devicemotion

事件，这些事件表明

orientationchange

即将发生。这是我见过的最好的解决方案，因为它实际上可以工作，并且不会禁用缩放

---

编辑：这种方法并不总是可靠的，特别是当你以一定角度握住ipad时。此外，我认为这项活动对gen 1 ipad不适用。如果你使用UIWebView，什么会起作用？我错过了什么吗？你能从cocoa中缩放UIWebView吗？我想我误解了这个问题。我描述的是应用程序正在使用的解决方案“内部safari”或UIWebview。Coneybeare，这是一个web应用程序，我认为你是对的。经过许多、许多小时的实验，我无法让它工作。这似乎是iPhone上safari应该能够支持的。哦，好吧。也许有一天……我想你可以阻止用户缩放，但你不能编程（在JavaScript中动态设置缩放级别。可以。document.querySelector（'meta[name=“viewport”]”）。content=“width=设备宽度；初始比例=1.0；最大比例=1.0；”轻微的输入错误-应该是

user scalable=no

完全禁用缩放不是一个好主意..请参阅Scott Jehl的解决方案：如果使用固定或绝对div，则不会。