设置最小宽度以适应响应式网站

Question

我正在制作一个完全响应式网站，但将网站的最小高度设置为 480 像素而不是“行业标准”320 像素真的很方便。我知道元标记视口，这在最小的屏幕上对我来说非常有用：

 <meta name="viewport" content="width=480, user-scalable=no">

但这仅适用于移动设备，任何屏幕报告超过 480 像素的设备都无法正确缩放。对于这些，这个有效：

 <meta name="viewport" content="width=device-width, user-scalable=no">

有没有办法将这两者结合起来？以某种方式设置站点的最小可能宽度，而不考虑实际屏幕尺寸，但使用 480px 的任何更高的屏幕值。

非常感谢，雅各布

原文由 Machi 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

使用后一个元视口值，只需将 body 或容器元素的 min-width CSS 属性 设置为您需要的 480px 值，并将 宽度 设置为 100%。当 100% 宽度低于 480px 时，最小宽度将覆盖宽度值（如您所料）。

我强烈建议您设置 box-sizing : border-box 以便您可以在不超过总屏幕宽度 100% 的情况下向主体或容器添加填充。

另请注意，禁用用户缩放（“user-scalable=no”）对于许多用户来说是糟糕的用户体验，尤其是对于那些有可访问性需求的用户。我建议您改为设置 initial-scale=1 。请参阅 http://dev.opera.com/articles/view/an-introduction-to-meta-viewport-and-viewport/

最终结果应该是这个样子——

 <meta name="viewport" content="width=device-width, initial-scale=1">

CSS-

 #container {
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
   min-width: 480px;
   padding: 20px;
   width: 100%;
}

原文由 pwdst 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

这会将移动版本限制为 520px；

 <meta name="viewport" id="vp" content="user-scalable=no, width=520, initial-scale=0.5, maximum-scale=0.5">
<script>
    window.onload = function() {
        if (screen.width > 520) {
            var mvp = document.getElementById('vp');
            //mvp.setAttribute('content','');
            mvp.setAttribute('content','width=device-width, initial-scale=1');
        }
    }
</script>

原文由 mevsme 发布，翻译遵循 CC BY-SA 4.0 许可协议