6

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

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

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

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

有关正在发生的事情的视觉帮助,请参见屏幕截图。

在此处输入图像描述

4

2 回答 2

0

似乎即使在方向更改后触发了 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; 
}
于 2020-07-11T18:03:59.930 回答
-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" />
于 2013-01-03T10:06:04.550 回答