Question

我在here页上工作，我无法在手机上显示出来。我正在用三星S7阅读它。该页面在桌面上看起来像这样（没有宽度箭头和尺寸）：

这就是我希望在S7上看到的内容：原始版本的简单缩小版本。宽度为1200px。我在页面下面有meta视口标记：

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

有时这个视口标签可以正常工作，完全符合我的要求。但是如果我再次加载它，页面可能会向左加载偏移量，以便菜单不在屏幕上。或者它会加载放大。在错误加载一次之后，我不停地敲击并轻扫它，然后它突然卡在上面的正确布局上。

我已尝试使用viewport标记。初始比例值似乎没有影响，我已经尝试过1和3，它们同时适用于两者并且两者都失败了。宽度似乎必须是1200或每次都会失败。

有谁能说明为什么这种行为如此不稳定？

由于

Answer 1

原件的简单缩小版。

为此，你不应该使用

<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中，它会自动获取设备的可用宽度并相应地拉伸。

您可以在MDN

上阅读官方文档

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

他们是minimum-scale，maximum-scale，user-scalable。

minimum-scale - ＆gt;最小缩放级别<int>值

maximum-scale - ＆gt;最大缩放级别<int>值

user-scalable - ＆gt;是否允许用户缩放。 yes或no