Question

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

以下两个元标记在平板电脑上运行良好，其中设备宽度＆gt; 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" />

然而，在手机上（例如设备宽度= 320px），前者对于内容来说太薄了;后者导致浏览器放大，因此用户必须手动缩小以查看内容。

或者，此元标记在手机上运行良好

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

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

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

Answer 1

因此，您希望动态更改{{h1}}代码宽度。

你走了：

viewport

请参阅：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>

请注意，我已经交换了＆＃34; initial-scale = 1＆＃34;，因为我认为你的方法错了。您希望在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">

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

@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，只是在viewport元标记中添加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

简而言之，无需在视口上设置最小宽度，因为您可以在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'>

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

7 个答案: