使用视口元标记实现最小宽度 [英] Achieving min-width with viewport meta tag

问题描述

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

以下两个元标记适用于设备宽度> 450px的平板电脑：

p>

 <！ - 使用设备宽度 - > 
< meta name =viewportcontent =width = device-width/> 
 
 <！ - 使用初始缩放意味着宽度参数被视为最小宽度 - > 
< meta name =viewportcontent =width = 450，initial-scale = 1.0/>然而，在手机上（例如device-width = 320px），前者对于内容太薄弱;而后者导致浏览器放大，因此用户必须手动缩小才能看到内容。
 
 
 
或者，此meta标签在手机上运行良好
 < meta name =viewportcontent =width = 450/> 
  
但没有充分利用平板电脑上可用的额外宽度。
 
 
 
任何帮助/想法都会非常感谢（如果它有所不同，我使用GWT）。      / div> 
所以你想改变 viewport 标签的宽度dynamicaly。
 
 
 
 / p> 
 
 
 < meta id =myViewportname =viewportcontent =width = 380> 
< script> 
 window.onload = function（）{
 var mvp = document.getElementById（'myViewport'）; 
 mvp.setAttribute（'content'，'width = 580'）; 
} 
< / script> 
  
请参阅： http://www.quirksmode.org/mobile/tableViewport.html  
 
I would like my webpage's viewport width to equal device-width as long as device-width > 450px, or 450px otherwise (my layout dynamically scales, but doesn't look good below 450px wide).

The following two meta tags work well on tablets, where the device-width > 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.

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).
解决方案
So you want to change the viewport tag's width dynamicaly .

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> 
See:http://www.quirksmode.org/mobile/tableViewport.html

                        
这篇关于使用视口元标记实现最小宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！