在响应式网站中设置最小宽度以适应屏幕

Question

我正在制作一个完全响应式的网站，但将网站的最小高度设置为480px而不是“行业标准”320px非常方便。我知道meta标签viewport，这在最小屏幕上基本上可以胜任：

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

但是这只对移动设备有效，任何屏幕报告超过480像素的设备都不能正确缩放。对于这些设备，以下代码可以使用：

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

请问有没有一种方法可以同时结合这两个条件？即设置网站的最小宽度，而不考虑实际屏幕大小，但使用大于480像素的任何更高屏幕值。

非常感谢，Jakub

- Machi

---

所以您希望网站的最小宽度为480，而在此之上则为视口大小？ - Josh Rutherford

你能不能不用CSS呢？在CSS中有一些简单的两行技巧，可以根据浏览器窗口大小来实现良好的可扩展性。 - Kyle

Josh Rutherford: 没错 :). Kyle: 可以是CSS、jQuery或其他任何东西。 - Machi

Answer 1

请使用后面的 meta viewport 值，并将 min-width CSS 属性 设置为您需要的 480px 值，将 width 设置为 100%。当 100% 宽度低于 480px 时，最小宽度将覆盖宽度值（如您所期望的）。

我强烈建议您设置 box-sizing: border-box，这样您可以向 body 或 container 添加 padding 而不超过总体 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

---

你好， 谢谢，这个功能很好，但只有一个例外。手机（至少安卓）以480像素的大小加载网站，但没有进行自适应调整，所以右侧的部分实际上无法显示。当你手动将其缩小到最小尺寸时，它看起来很棒，但不能自动完成。有没有办法一直以缩小的方式加载它？ - Machi

• 屏幕，这是它的加载方式[链接]（https://www.dropbox.com/s/uhb2af1q1ldloa2/2014-04-09%2010.38.35.png），这是它应该的加载方式[链接]（https://www.dropbox.com/s/f2z4k3tylecptpg/2014-04-09%2009.55.14.png）

- Machi

这在很大程度上取决于您如何设计布局。基于浮动或Flexbox（开发人员经常结合两者）是最好的选择，而表格布局或绝对定位则不可取。宽度应该基于百分比（您可能希望使用媒体查询来适应狭窄和较宽的视口尺寸之间的转换）。是否有布局/轮廓的实时链接和/或JSFiddle（http://jsfiddle.net/）可以供我们查看？您自己可以进行的主要检查是，所有元素都使用百分比而不是显式宽度（了解标准元素包装行为会有所帮助）。对于图像等，max-width非常有用。 - pwdst

@Machi，您还需要帮助吗？如果是的话，请提供一些有关您的布局的详细信息，我会尝试在周末更新答案。否则，如果这些答案中的一个已经帮助了您，请接受它以帮助未来遇到类似问题的用户。 - pwdst

Answer 2

这将限制移动版本的宽度为520像素；

<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

Answer 3

关于容器最小宽度的答案，我不确定，因为Chrome移动预览无法理解它。添加这个hack（使用jQuery）：

jQuery(function($){
    let upgradeViewport = function(){
        let viewport = $('meta[name=viewport]');
        let viewportMinWidth = parseInt($('head').attr('data-viewport-width'));
        if (viewport.attr('content').indexOf('user-scalable=0')!=-1 || viewport.attr('content').indexOf('user-scalable=no')!=-1){
            return;
        }
        if (!upgradeViewport.original) upgradeViewport.original = viewport.attr('content');

        if(window.innerWidth <= viewportMinWidth) {
            viewport.attr('content', 'width='+viewportMinWidth);
        }else{
            viewport.attr('content', upgradeViewport.original);
        }
    };
    $(document).ready(upgradeViewport);
    $(window).resize(upgradeViewport);
});

将动态更改 viewport meta 标签，使用 head 中 data-viewport-width 属性的值。正常工作，也适用于移动预览。

- Alexander Goncharov

Answer 4

首先，最好使用%进行设置而不是固定宽度为480像素。（例如：最小宽度：45%）。屏幕将根据屏幕分辨率自动调整。

- Dextere