我已经查看了使用视口(viewport)元标记缩放适合移动网页内容下的解决方案，但对提供的示例没有任何运气。
我的问题是我有 940px 宽的网页，需要根据设备视口(viewport)宽度放大或缩小。我正在使用 Phonegap 将网页移植到 Android 应用程序中。
如果我的视口(viewport)超过 940 像素(例如在我的 1200 像素宽的手机上)，那么下面的代码可以正常工作。视口(viewport)缩放到适当的量，以便页面填充显示:
var mvp = document.getElementById('view');
var ratio= screen.width / 940
mvp.setAttribute('content', 'width=device-width, initial-scale='+ ratio +', target-densitydpi=device-dpi')
但是，如果我有一个宽度低于 940 的低分辨率平板电脑，则页面太大而无法容纳，并且需要四处移动才能看到屏幕外的部分。根据上述线程中的讨论，我尝试了以下操作，但没有任何视口(viewport)设置组合会强制其缩放到 940，以便视口(viewport)可以“缩小”到正确的大小:
if (screen.width < 940) {mvp.setAttribute('content', 'initial-scale=1.0, maximum-scale=1, minimum-scale=1.0, user-scalable=yes, width=' + screen.width)};
或
if (screen.width < 940) {mvp.setAttribute('content', 'initial-scale=1.0, maximum-scale=1, minimum-scale=1.0, user-scalable=yes, width=' + 940)};
不工作。事实上，手动将视口(viewport)宽度设置为任何值根本没有任何效果。
我做错了什么？我只是希望视口(viewport)宽度缩小，以便 940px 页面的整个宽度正确显示。必须有一个视口(viewport)设置的组合可以为我做到这一点。我很感激帮助。
最佳答案
width视口(viewport)元标记的值仅设置布局宽度或“初始包含 block ”宽度。即如果您给出 <html>元素样式为width: 100% ，最终以像素为单位的宽度是您在视口(viewport)元标记中设置的值。
如果您的页面确实是 940 px(因为，例如，您为 html 指定了明确的宽度: style="width: 940px" )，则 width在视口(viewport)标签中不会有任何效果(嗯，取决于哪个浏览器和其他怪癖 - 所以将其设置为 940 是一个好主意)。
因此，只需确保页面加载完全缩小即可。浏览器不允许您缩小到超出页面内容宽度的范围，因此您不需要针对较大屏幕的特殊情况。 Chrome 应该加载完全缩小的页面。据我所知，Firefox 和 Safari 通常会加载页面，以便 width=您在视口(viewport)标记中设置的属性适合设备屏幕(因此我上面有警告)。因此，您实际上不必对视口(viewport)元标记做太多事情:
<meta name="viewport" content="width=940">
对于较大和较小的屏幕都应该可以解决问题 - 假设您的内容实际上是 940 像素宽。如果这不起作用，则您的内容可能对视口(viewport)大小有一定的大小依赖性，或者您在某处有超宽的元素 - 内容的链接或示例可能会有所帮助。
关于width - 将大页面缩放到小视口(viewport)(缩小)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48769791/