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

Posted 2023-03-06

【中文标题】使用 JavaScript/onorientationchange 在 iPhone 上重置 Safari 的比例/宽度/缩放

【英文标题】：Reset scale/width/zoom of Safari on iPhone using JavaScript/onorientationchange

【发布时间】：2010-11-28 16:20:18

【问题描述】：

我显示不同的内容取决于用户如何使用 body 标签中的 onorientationchange 调用来握住他/她的手机。这很好用——我隐藏了一个 div，同时让另一个可见。

纵向模式下的 div 在首次加载时看起来很棒。我用它来获得正确的比例/缩放：

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

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

我尝试了许多不同的方法来尝试正确调整屏幕的比例/缩放/宽度，但没有运气。有没有办法做到这一点？

提前致谢！

【参考方案1】：

您可以在内容属性中设置user-scalable 属性。试试这个：

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

来自this answer：

但如果您指定 User-scalable=no 则意味着网站不允许放大或缩小。

【讨论】：

小错字 - 应该是 user-scalable=no

【参考方案2】：

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

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

最大规模是卖给我的东西。这意味着在 iPhone 上从纵向到横向的过渡非常流畅，完全没有缩放问题......

【讨论】：

完全禁用缩放不是一个好主意。请参阅 Scott Jehl 的解决方案：github.com/scottjehl/ios-Orientationchange-Fix/blob/master/…

【参考方案3】：

为此使用元标记不起作用。我已经尝试了元标记和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))returnvar l=m.document;if(!l.querySelector)returnvar 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)returnfunction f()n.setAttribute("content",d);g=truefunction b()n.setAttribute("content",k);g=falsefunction 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()elseif(!g)f()m.addEventListener("orientationchange",f,false);m.addEventListener("devicemotion",e,false))(this);

这是一个很好地包含在 IIFE 中的解决方案，因此您不必担心名称空间问题。

只需将其放入您的脚本（如果您使用 jQuery，则不要放入 document.ready()）和中提琴！

它所做的只是禁用devicemotion 事件的缩放，这些事件表明orientationchange 即将发生。这是我见过的最好的解决方案，因为它确实有效并且不会禁用缩放。

编辑：这种方法并不总是可靠的，尤其是当您以一定角度握住 ipad 时。另外，我认为这个活动不适用于第 1 代 ipad

【参考方案4】：

上面接受的“答案”并不是真正的答案，因为禁止任何缩放与要求 IE 用户切换到另一个浏览器一样糟糕。可访问性很糟糕。您希望您的设计在切换视图方向时不做 Apple 认为理想的时髦缩放操作，但您却让残疾用户望而却步。强烈不推荐。

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

【讨论】：

如果您使用的是固定或绝对 div，则不会。

【参考方案5】：

当内容大于视口时，我在缩放级别从横向变为纵向时遇到了一些问题。设置“minimum-scale=1.0”，为我解决了这个问题。

【参考方案6】：

我想我也有这个问题。 尝试在视口标签中添加“最大比例=1.0”（如果您愿意，也可以添加“最小比例=1.0”）。 这假设您不希望用户能够扩展（我不这样做）

【参考方案7】：

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

我还没有对此进行测试，但是有一种简单的方法可以让您的 javascript 与代码的 Objective-c 端对话，此时您可以访问诸如缩放 web 视图之类的东西。

【讨论】：

如果您使用的是 UIWebView，什么会起作用？我错过了什么？你可以从可可缩放 UIWebView 吗？

我想我误读了这个问题。如果应用程序使用“内部 safari”或 UIWebview，我描述的是一个解决方案。

Coneybeare，这是一个网络应用程序，我认为你是对的。经过很多很多小时的实验，我无法让它工作。 iPhone上的Safari似乎应该能够支持。那好吧。也许有一天……

我认为您可以阻止用户缩放，但您不能以编程方式（在 JavaScript 中动态地）设置缩放级别。

是的，你可以。 document.querySelector('meta[name="viewport"]').content ="width=device-width; initial-scale=1.0; maximum-scale=1.0;"