视口问题

Question

我想让我的页面适合屏幕，无论分辨率如何，都不允许缩放。 我在很多文档/资源中看到，这是使用视口调整屏幕上整个页面的最佳方式。 （甚至jquerymobile生成此视口）

<meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1">

但它只显示页面的某些部分。

但是这段代码可以解决问题。整个页面适合屏幕

<meta name="viewport" content="user-scalable=0;" />

区别是什么？

Answer 1

此meta代码要求您的文档宽度为设备宽度。 jQuery Mobile使用它，因为jQuery Mobile确保它将根据设备宽度调整文档宽度。如果要在宽度为320px的屏幕上放置980px宽的页面，则必须在meta标记中设置980px：

<meta name="viewport" content="width=980, user-scalable=no">

如果您不知道文档宽度，则必须先获取文档宽度，然后设置meta标记属性。