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

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

使用后一个元视口值,只需将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%;
}