68

我希望我的网页的视口宽度等于设备宽度，只要设备宽度> 450 像素，否则为 450 像素（我的布局动态缩放，但在 450 像素以下看起来不太好）。

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

<!-- 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）。

4

7 回答 7

39

所以你想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

于 2013-02-23T21:07:07.830 回答
24

试试这个：

<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，因为我认为您弄错了。您希望initial-scale设置为1when width=device-width，以便页面完全适合窗口。当您设置特定的视口宽度时，您不想将 initial-scale 设置为 1（否则页面将开始放大）。

于 2015-11-10T20:47:47.643 回答
5

使用@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;
    }

}

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

这是另一个例子

于 2013-02-23T12:47:55.243 回答
5

其他答案中给出的 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为 viewport 元标记添加一个属性：

在视口元标记中设置最小宽度

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

<meta name="viewport" content="width=device-width, initial-scale=1.0, min-width=450" />
<script type="text/javascript" src="viewport-min-width.js"></script>
于 2016-12-06T20:55:18.793 回答
1

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

body {
  min-width: 450px;
}

我在 Chrome for Android 中做了一些测试，如果视口宽度设置为device-width. shrink-to-fit=yes最初缩小页面也很有用。

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

于 2017-12-06T00:46:09.727 回答
0

扩展@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>
于 2021-01-13T08:22:03.367 回答
-1

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

<meta name='viewport' content='width=device-width'>
于 2021-02-26T01:56:28.157 回答