mobile - 无法让桌面页面在移动设备上可靠显示

Question

我正在处理一个页面 here我无法在手机上正常显示。我正在用三星 S7 阅读它。页面在桌面上看起来像这样(没有宽度箭头和尺寸):



这就是我想在 S7 上看到的:一个简单的原版缩小版。宽度为 1200 像素。我在页面下面有元视口(viewport)标签:

<meta name="viewport"  content="width=1200, initial-scale=3">

有时这个视口(viewport)标签可以工作，给我我想要的东西。但是如果我再次加载它，页面可能会向左加载偏移量，以便菜单不在屏幕上。否则它将加载放大。一次加载不正确后，我不断点击和滑动，它突然捕捉到上面的正确布局。

我已经尝试过 viewport 标签。初始比例值似乎没有影响，我尝试了 1 和 3，两者都适用，但两者都失败了。宽度似乎必须为 1200，否则每次都会失败。

谁能提出为什么这行为如此不规律？

谢谢

Answer 1

a simple scaled down version of the original.

为此，您不应使用

<meta name="viewport"  content="width=1200, initial-scale=3">

采用

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

因为，如果你设置 width=1200px ，您可能需要在移动设备中滚动它。

但是在 width=device-width ，它会自动获取设备的可用宽度并相应地拉伸(stretch)。

您可以在 MDN 上阅读官方文档。

还有一些关于缩放的其他属性。

他们是 minimum-scale , maximum-scale , user-scalable .
minimum-scale -> 最小缩放级别 <int>值(value)
maximum-scale -> 最大缩放级别 <int>值(value)
user-scalable -> 是否允许用户缩放。 yes或 no