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

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

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

然而，在手机上（例如device-width = 320px），前者对于内容太薄; 而后者导致浏览器放大，因此用户必须手动缩小才能看到内容。

另外，这个元标签在手机上运行良好

 <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','width=450'); } } </script> 

请注意，我已经调换了“initial-scale = 1”，因为我认为你错了。 当width = device-width时，您希望initial_scale设置为1，以便页面完全适合窗口。 当您设置特定的视口宽度时，您不想将初始缩放比例设置为1（否则页面将放大放大）。

Answer 3

使用@media标签和CSS。 它创造奇迹。 尽pipe它不会为视口提供最小的宽度，但这是首选的方法。

这是我为视口做的事情：

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

显然你也可以有中等大小

在另一个例子中更多

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来为视口元标记添加min-width属性：

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

有了这个，你可以做：

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