Question

我正在建立一个完全响应的网站，但将网站的最小高度设置为480px，而不是“行业标准”320px非常方便。我知道元标记视口，这在我最小的屏幕上完成了这项工作：

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

但这仅适用于手机，任何屏幕报告超过480像素的设备都无法正常缩放。对于这些，这个工作：

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

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

非常感谢，Jakub

Answer 1

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

我强烈建议您设置box-sizing：border-box，以便在不超过总屏幕宽度100％的情况下为您的身体或容器添加填充。

另请注意，禁用用户扩展（＆＃34;用户可扩展=否＆＃34;）对许多用户来说是一种糟糕的用户体验，特别是对于那些有可访问性需求的用户。我建议您设置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%;
}

Answer 2

我不确定容器最小宽度的答案，因为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);
});

将根据data-viewport-width的属性head中的值动态更改视口元标记。可以与移动预览器一起正常工作。

Answer 3

首先最好使用％而不是固定宽度= 480px。（例如： - min-width：45％）。屏幕将根据屏幕分辨率自动调整。

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

3 个答案: