将大页面缩放到小视口（缩小）答案

【问题标题】：Scaling large page to small viewport (zooming out)将大页面缩放到小视口（缩小）
【发布时间】：2018-02-15 06:53:11
【问题描述】：

我已经查看了使用视口元标记缩放适合移动网络内容下的解决方案，但对提供的示例没有任何帮助。

我的问题是我有 940px 宽的网页，需要根据设备视口宽度放大或缩小。我正在使用 Phonegap 将网页移植到 Android 应用中。

如果我的视口超过 940 像素，例如在我的 1200 像素宽的手机上，那么下面的代码可以正常工作。视口缩放恰到好处，以使页面充满显示：

var mvp = document.getElementById('view');
var ratio= screen.width / 940
mvp.setAttribute('content', 'width=device-width, initial-scale='+ ratio +', target-densitydpi=device-dpi')

但是，如果我有一个宽度低于 940 的低分辨率平板电脑，则页面太大而无法容纳，需要四处移动才能看到屏幕外的部分。根据上述线程中的讨论，我尝试了以下操作，但没有任何视口设置组合会强制它缩放到 940，以便视口可以“缩小”到正确的大小：

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)};

不工作。事实上，手动将视口宽度设置为任何值根本没有任何效果。

我做错了什么？我只想缩小视口宽度，以便正确显示 940px 页面的整个宽度。必须有一个视口设置的组合可以为我做到这一点。非常感谢您的帮助。

【问题讨论】：

标签： width zooming scale viewport

【解决方案1】：

视口元标记的width 值仅设置布局宽度或“初始包含块”宽度。即如果你给<html>元素一个width: 100%的样式，它最终的像素宽度就是你在视口元标记中设置的。

如果你的页面真的是 940 像素（例如，因为你给你的 html 一个明确的宽度：style="width: 940px"），那么视口标签中的width 不会有任何效果（嗯，取决于哪个浏览器和其他怪癖 - 所以将其设置为 940 是个好主意）。

因此，只需确保页面加载完全缩小即可。浏览器不会让您缩小超过页面内容宽度的范围，因此您不需要为更大的屏幕设置特殊情况。 Chrome 应该加载完全缩小的页面。 Firefox 和 Safari，据我所知，通常会加载页面，以便您在视口标签中设置的 width= 属性适合设备屏幕（因此我在上面的警告）。所以你真的不必对视口元标记做太多事情：

<meta name="viewport" content="width=940">

无论是大屏幕还是小屏幕，都应该做到这一点——假设您的内容实际上是 940 像素宽。如果这不起作用，则可能是您的内容在一定程度上依赖于视口大小，或者您在某处有一个超宽的元素 - 内容的链接或示例可能会有所帮助。

【讨论】：