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

Question

我有一个针对移动设备进行优化的网页。

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

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

为什么我的移动浏览器会这样做？如何阻止它发生？

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

Answer 1

即使方向更改后会触发resizeEvent，但设备仍无法在放大以填充更宽的景观视口后重置缩放。

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

（1）设置最小比例= 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; 
}

Answer 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" />