移动 Safari 不放大方向变化？

Posted 2023-02-23

【中文标题】移动 Safari 不放大方向变化？

【英文标题】：Mobile Safari not zooming on orientation change?

【发布时间】：2013-06-05 21:17:22

【问题描述】：

我正在开发一个网络应用程序，我希望它能够填充浏览器的整个可视区域，而不需要滚动。我已经用一个视口标签完成了这个：

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

这似乎对除 Mobile Safari 之外的所有浏览器都有预期的效果。在 Safari 上，我有两个问题：

纵向模式下页面底部悬垂在窗口底部下方约60px，横向模式下悬垂约120px。我认为这是因为 Safari 的地址栏被视为其可视区域的一部分，但您能否验证这一点以及如何在不影响其他浏览器的情况下绕过它？ 页面内容在方向更改后无法正确调整自身大小。页面右侧有一个很大的装订线。

如果有什么不同，我使用的是 jQuery Mobile，这是一个 page 对象，左侧有一个 panel。 Chrome for android 或 Browser.apk 中不存在这些错误。

编辑：可以在http://bit.ly/19LoH8m 找到页面。

谢谢。 斯科特

【问题讨论】：

你能给我们一个链接或jsfiddle吗？ jsfiddle.net

已添加到问题中。

先检查这个，api.jquery.com/innerHeight

【参考方案1】：

尝试先更新这些，让我们看看。

代替

$("#mapViewer").outerHeight($(window).innerHeight());

使用

$("#mapViewer").outerHeight($(window).height());

参见 JQ 文档，http://api.jquery.com/innerHeight/

JQM 中也有方向改变事件， 而不是

$(window).resize(function() 
    /* some calculation */
);

使用

$( window ).on( "orientationchange", function( event ) 
    /* some calculation */  
); 

【讨论】：

实际上 Mobile Safari 的检查器为两种高度方法返回相同的值，并且切换它们没有效果。但是，我确实找到了解决方法——我只是删除了视口标签。现在将其作为答案发布，并在我完成跨浏览器测试后将其标记为已接受。

【参考方案2】：

通过从视口中删除 width 和 height 属性解决了这个问题。它现在可以在 Mobile Safari、Chrome（适用于 ios、桌面和 Android）和 IE10 上正确呈现。