实现最小宽度与视口元标记(Achieving min-width with viewport met

只要我想我的网页上的视宽相等设备的宽度 ， 设备宽度 > 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" />

然而，在手机上（其中，例如，设备宽度= 320像素）前者太薄的内容; 后者会导致浏览器来放大，因此用户必须手动缩小以观看该内容。

另外，这个元标记行之有效手机上

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

但并不需要在平板电脑上可用的额外宽度的优势。

任何帮助/意见将非常感激（如果它的确与众不同，我使用GWT）。

Answer 1:

所以，你想改变viewport标签的宽度dynamicaly。

干得好：

<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>

请注意，我已经换了“初始规模= 1”，因为我认为你有这南辕北辙。你想initial_scale设置为1时，宽度=设备宽度，使页面完全适合在窗口中。当您设置一个特定的视口的宽度，你不想初始比例设置为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;
    }

}

很明显，你可以有中间尺寸太...

这里有更多的另一个例子

Answer 4:

在其他的答案中给出的JavaScript代码不工作在Firefox，但如果去掉meta标签并插入一个新的它会工作。

<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>

对于我的理智，我写了一个填充工具，只是增加一个min-width属性视窗meta标签：

组最小宽度在视口元标记

有了这个，你可能只是做：

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