Html 使用视口元标记实现最小宽度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15040408/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Achieving min-width with viewport meta tag
提问by Tom G
I would like my webpage's viewport widthto equal device-widthas long as device-width> 450px, or 450px otherwise (my layout dynamically scales, but doesn't look good below 450px wide).
我希望我的网页的视口宽度等于设备宽度，只要设备宽度> 450 像素，否则为 450 像素（我的布局动态缩放，但在 450 像素以下时看起来不太好）。
The following two meta tags work well on tablets, where the device-width > 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" />
however, on phones (where e.g. device-width=320px) the former is too thin for the content; and the latter causes the browser to zoom in, so the user has to manually zoom out to see the content.
然而，在手机上（例如 device-width=320px），前者对于内容来说太薄了；而后者会导致浏览器放大，因此用户必须手动缩小才能看到内容。
Alternatively, this meta tag works well on phones
或者，此元标记在手机上运行良好
<meta name="viewport" content="width=450" />
but doesn't take advantage of the extra width available on tablets.
但没有利用平板电脑上可用的额外宽度。
Any help/ideas would be really appreciated (and if it makes a difference, I'm using GWT).
任何帮助/想法将不胜感激（如果它有所作为，我正在使用 GWT）。
采纳答案by Suresh Atta
So you want to change the viewporttag's width dynamicaly .
所以你想viewport动态地改变标签的宽度。
Here you go :
干得好 ：
<meta id="myViewport" name="viewport" content="width = 380">
<script>
window.onload = function () {
var mvp = document.getElementById('myViewport');
mvp.setAttribute('content','width=580');
}
</script>
回答by CpnCrunch
Try this:
尝试这个：
<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>
Note that I have swapped the "initial-scale=1", as I think you had it the wrong way round. You want initial_scale to be set to 1 when width=device-width, so that the page fits exactly in the window. When you set a specific viewport width, you don't want to set initial-scale to 1 (otherwise the page will start off zoomed in).
请注意，我已经交换了“initial-scale = 1”，因为我认为您以错误的方式进行了操作。当 width=device-width 时，您希望将 initial_scale 设置为 1，以便页面完全适合窗口。当您设置特定的视口宽度时，您不想将初始比例设置为 1（否则页面将开始放大）。
回答by user1258245
use a @media tag and css. It works wonders. Although it does not supply a minimal width to the view port, this is the preferred way to go.
使用@media 标签和css。它创造奇迹。尽管它没有为视口提供最小宽度，但这是首选方式。
Here is what I do for the viewport:
这是我为视口所做的：
<meta name="viewport" content="initial-scale=1.0, width=device-width, user-scalable=yes, minimum-scale=1.0, maximum-scale=2.0">
Then I adjust the size for the panel attached to the viewPort:
然后我调整连接到 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;
}
}
Obviously you can have intermediate sizes too...
显然你也可以有中间尺寸......
回答by Brendan Long
The JavaScript code given in the other answers doesn't work in Firefox, but it will work if you remove the meta tag and insert a new one.
其他答案中给出的 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>
Or just always insert it in JavaScript:
或者总是在 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>
For my sanity, I wrote a polyfill to just add a min-widthattribute to the viewport meta tag:
为了我的理智，我编写了一个 polyfill 来min-width向视口元标记添加一个属性：
Set min-width in viewport metatag
With this, you could just do:
有了这个，你可以这样做：
<meta name="viewport" content="width=device-width, initial-scale=1.0, min-width=450" />
<script type="text/javascript" src="viewport-min-width.js"></script>
回答by Andrew Svietlichnyy
In short, there is no need to set min-width on viewport because you can set it on bodyor htmlelement instead, to make them and their content wider than viewport. User will be able to scroll or zoom out content.
简而言之，不需要在视口上设置 min-width ，因为您可以将其设置在body或html元素上，以使它们及其内容比视口更宽。用户将能够滚动或缩小内容。
body {
min-width: 450px;
}
I did some tests in Chrome for Android and it scales fonts of some elements up if viewport width is set to anything other than device-width. Also shrink-to-fit=yesis useful to have a page zoomed out initially.
我在 Chrome for Android 中做了一些测试，如果视口宽度设置为device-width. shrink-to-fit=yes最初缩小页面也很有用。
Lastly, this approach supports desktop browsers that can have strange window sizes or current zoom settings (both of which affect reported viewport dimensions), but don't honor the viewport meta tag.
最后，此方法支持可能具有奇怪窗口大小或当前缩放设置（两者都会影响报告的视口尺寸）的桌面浏览器，但不支持视口元标记。
