为什么将移动设备从横向旋转到纵向后网页会放大？答案

【问题标题】：Why is the web page zooming in after rotating a mobile device from landscape to portrait?为什么将移动设备从横向旋转到纵向后网页会放大？
【发布时间】：2012-06-17 14:32:10
【问题描述】：

我有一个为在手机上查看而优化的网页。

我正在使用viewport 元标记<meta name = "viewport" content = "width = device-width">，它检测设备宽度并将视口宽度设置为该值。这意味着我的网页可以在移动浏览器中正确加载，而不是看起来可笑地缩小。

当我在我的手机（三星 Galaxy S2）上以纵向模式加载页面时，它看起来很好，我旋转到横向，它看起来很好，但是如果我再次旋转回纵向，页面有稍微放大。我要么必须缩小，要么水平滚动。

为什么我的移动浏览器会出现这种情况，我该如何阻止这种情况发生？

查看屏幕截图以了解正在发生的事情。

【问题讨论】：

是的，这也发生在我身上

标签： html mobile viewport device-orientation

【解决方案1】：

似乎即使在方向更改后触发了 resizeEvent，设备在放大以填充更宽的横向视口后仍然无法重置缩放。

我必须执行以下两项操作才能在方向更改后正确调整显示大小：

(1) 设置 minimum-scale=1.

<meta name="viewport" content="width=device-width, initial-scale=1.0, 
minimum-scale=1.0">

(2) 在 CSS 文件中：

body {
 height: 100vh; 
 height: -webkit-fill-available; 
 min-height: 100vh; /* Fallback for browsers that do not support Custom Properties */
 min-height: -webkit-fill-available; 
}

【讨论】：

【解决方案2】：

这是你需要的

<meta content='width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;' name='viewport' />


<meta name="viewport" content="width=device-width" />

【讨论】：

你能详细说明一下这会做什么吗？从外观上看，这似乎会阻止用户手动放大/缩小。
两者都需要吗？即使我熟悉视口元标记，这个答案也让我感到困惑。我在 iOS 上看到了这一点，并在这里使用了第二行来获得一个不错的解决方案，但对我来说这在 android 上仍然是一个问题。