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

Question

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

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

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

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

请参阅屏幕截图以直观地了解正在发生的情况。

Answer 1

这就是你需要的

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