使用视口元标记实现最小宽度

Question

我希望我的网页的 viewport width 等于 device-width，只要 device-width > 450px，否则为 450px（我的布局动态缩放，但在 450px 宽以下看起来不太好）。

以下两个元标记在设备宽度 > 450px 的平板电脑上运行良好：

<!-- uses device width -->
<meta name="viewport" content="width=device-width" />

<!-- use of initial-scale means width param is treated as min-width -->
<meta name="viewport" content="width=450, initial-scale=1.0" />

但是，在手机上（例如 device-width=320px），前者对于内容来说太薄了；而后者会导致浏览器放大，因此用户必须手动缩小才能看到内容。

或者，这个元标记在手机上也很有效

<meta name="viewport" content="width=450" />

但没有利用平板电脑上可用的额外宽度。

任何帮助/想法都将不胜感激（如果它有所作为，我正在使用 GWT）。

Answer 1

所以你想动态改变viewport标签的宽度。

给你：

<meta id="myViewport" name="viewport" content="width = 380">
<script>
window.onload = function () {
    var mvp = document.getElementById('myViewport');
    mvp.setAttribute('content','width=580');
}
</script> 

见：http://www.quirksmode.org/mobile/tableViewport.html

Answer 2

试试这个：

<meta id="vp" name="viewport" content="width=device-width, initial-scale=1">
<script>
window.onload = function() {
    if (screen.width < 450) {
        var mvp = document.getElementById('vp');
        mvp.setAttribute('content','user-scalable=no,width=450');
    }
}
</script>

请注意，我已交换了 initial-scale=1，因为我认为您的做法错误。当width=device-width 时，您希望将initial-scale 设置为1，以便页面完全适合窗口。当您设置特定的视口宽度时，您不想将 initial-scale 设置为 1（否则页面将开始放大）。

Answer 3

使用@media 标签和 css。它创造了奇迹。虽然它没有为视口提供最小宽度，但这是首选方式。

这是我为视口所做的：

<meta name="viewport" content="initial-scale=1.0, width=device-width, user-scalable=yes, minimum-scale=1.0, maximum-scale=2.0">

然后我调整附加到视口的面板的大小：

@media all and (max-width: 1024px) {
    /*styles for narrow desktop browsers and iPad landscape */
       .myContentPanel{
         width: 450;
    }    
}


@media all and (max-width: 320px) {
   /*styles for iPhone/Android portrait*/
      .myContentPanel {
         width: 320;
    }

}

显然你也可以有中间尺寸...

here's more in another example

Answer 4

其他答案中给出的 JavaScript 代码在 Firefox 中不起作用，但如果您删除元标记并插入一个新标记，它将起作用。

<meta name="viewport" content="width=device-width, initial-scale=1">
<script>
if (screen.width < 450){
    var viewport = document.querySelector("meta[name=viewport]");
    viewport.parentNode.removeChild(viewport);

    var newViewport = document.createElement("meta");
    newViewport.setAttribute("name", "viewport");
    newViewport.setAttribute("content", "width=450");
    document.head.appendChild(newViewport);
}
</script>

或者总是在 JavaScript 中插入它：

<script>
var viewport = document.createElement("meta");
viewport.setAttribute("name", "viewport");
if (screen.width < 450) {
    viewport.setAttribute("content", "width=450");
} else {
    viewport.setAttribute("content", "width=device-width, initial-scale=1");
}
document.head.appendChild(viewport);
</script>

---

为了我的理智，我写了一个 polyfill 来添加一个 min-width 属性到视口元标记：

Set min-width in viewport metatag

有了这个，你可以这样做：

<meta name="viewport" content="width=device-width, initial-scale=1.0, min-width=450" />
<script type="text/javascript" src="viewport-min-width.js"></script>

Answer 5

简而言之，不需要在视口上设置 min-width，因为您可以在 body 或 html 元素上设置它，以使它们及其内容比视口更宽。用户将能够滚动或缩小内容。

body {
  min-width: 450px;
}

我在 Chrome for Android 中做了一些测试，如果视口宽度设置为 device-width 以外的任何值，它会放大某些元素的字体。此外，shrink-to-fit=yes 对于最初缩小页面很有用。

最后，这种方法支持的桌面浏览器可能具有奇怪的窗口大小或当前缩放设置（这两者都会影响报告的视口尺寸），但不支持视口元标记。

Answer 6

扩展@Brendan 和其他人的答案。视口大小不会在方向（纵向、横向）更改时再次调整。为此，请在方向更改时添加事件侦听器并再次调整大小。

<script>
      const resize = () => {
        if (screen.width < 450) {
          var viewport = document.querySelector("meta[name=viewport]");
          viewport.parentNode.removeChild(viewport);
    
          var newViewport = document.createElement("meta");
          newViewport.setAttribute("name", "viewport");
          newViewport.setAttribute(
            "content",
            "width=450, maximum-scale=1.0, user-scalable=no"
          );
          document.head.appendChild(newViewport);
        }
      };
      resize();
      window.addEventListener("orientationchange", resize);
</script>

Answer 7

我刚刚删除了 initial-scale=1 并在 Android Chrome 和内置浏览器上完美运行。不再有意外的缩放！ :)

<meta name='viewport' content='width=device-width'>