在视口元标记中设置最小宽度 [英] Set min-width in viewport metatag

问题描述

我正在设计一个网页[回应]。屏幕的最小宽度应为480px。我怎么做到的？

现在我将宽度固定为480px，这些手机在平板电脑上看起来非常庞大。对于大屏幕，宽度应该动态变化。

解决方案

我编写了一个polyfill来为视口添加 min-width 元标记：

https： //github.com/brendanlong/viewport-min-width-polyfill

如果你使用它，你可以这样做：

 < meta name =viewportcontent =width = device-width，initial-scale = 1.0，min-width = 480/> 
< script type =text / javascriptsrc =viewport-min-width.js>< / script> 
  

如果 screen.width< ; minWidth 。我已经在移动Firefox和Chrome上进行了测试，并且它应该可以在我听到的Safari中运行。

I'm designing a web page [responsive]. Min-width of the screen should be 480px. how do i do it?

Right now i'm fixing the width to 480px which looks perfect on the phones but looks pretty huge on the tablets. For big screens the width should change dynamically.

解决方案

I wrote a polyfill to add min-width to the viewport meta tag:

https://github.com/brendanlong/viewport-min-width-polyfill

If you use it, can you just do:

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

It works by replacing the viewport with a static width if screen.width < minWidth. I've tested in mobile Firefox and Chrome, and it should work in Safari from what I've heard.

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