Question

我正在开发一个使用以下代码的响应式布局：

<meta name="viewport" content="initial-scale=1.0; width=device-width;">

设计师为大桌面（1370px宽），小桌面（990px）和平板电脑（620px）构建了布局。假设移动（<620px）将使用平板电脑版本，但需要对其进行扩展。

但我怎么能这样做呢？由于视口的宽度设置为device-width，因此它会加载最小的样式表，但不会缩放它。

tl; dr - 有没有办法告诉移动浏览器忽略width=device-width值，而是在视口小于某个值时缩放网站？

非常感谢。

Answer 1

首先，这不是典型响应式设计的最佳方法。如果您首先构建移动设备并将宽度设置为％，那么它将避免您可能遇到的任何问题，因为内容将扩展到设备宽度。

如果你真的想沿着另一条路走下去，你可以使用javascript改变元视口元素并使用enquire.js来决定何时会发生....

enquire.register("screen and (max-width:619px)", {

    match : function() {
$('meta[name=viewport]').attr(
 'content',
 'width=620; initial-scale=1.0'
);

},      

    unmatch : function() {
$('meta[name=viewport]').attr(
 'content',
 'width=device-width, initial-scale=1.0'
);
},
});

请注意

未经测试
我的jquery / javascript非常糟糕，但应该给你足够的时间继续前进。

在响应式布局中缩放小于特定值的视口

1 个答案: