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

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

现在我将宽度固定为 480px，这在手机上看起来很完美，但在平板电脑上看起来相当大。对于大屏幕，宽度应该动态变化。

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

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

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

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

它的工作原理是用静态宽度替换视口，如果screen.width < minWidth。我已经在移动版 Firefox 和 Chrome 中进行了测试，据我所知，它应该可以在 Safari 中运行。