禁用移动设备上的缩放以获得固定的视口大小

Question

我正在尝试禁用移动设备上的缩放功能。 我知道这段代码会起作用。

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

但在我的情况下，我没有选择使用＆＃34; width = device-width＆＃34;。我必须将视口大小设置为480px，所以我使用以下代码

<meta name="viewport" content="width=480px, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

但是我在移动设备上放大了该页面的视图，我可以将其缩小。

Answer 1

使用＆＃34; target-densitydpi = device-dpi＆＃34;因此代码

<meta name="viewport" content="width=480, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0,target-densitydpi=device-dpi, user-scalable=no" />

解决了我的问题。感谢Dave Rook

Answer 2

我认为你最好使用100％而不是480

Answer 3

我最近遇到过类似的问题，当我第一次加载页面时，我需要将它完全显示在移动设备上，但它会根据固定的视口宽度不断放大设备的宽度。这就是我所拥有的：

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

我删除了initial-scale=1.0，之后没有任何问题。您当然可以使用user-scalable=no来阻止您按照要求进行缩放。