javascript - 在视口(viewport)元标记中设置最小宽度

Question

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

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

Answer 1

我写了一个 polyfill 来添加 min-width到视口(viewport)元标记:

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，它通过用静态宽度替换视口(viewport)来工作.我已经在移动版 Firefox 和 Chrome 中进行了测试，据我所知，它应该可以在 Safari 中运行。