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

Question

我正在研究使用以下代码的响应式布局：

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

设计师为大型桌面（1370 像素宽）、小型桌面（990 像素）和平板电脑（620 像素）构建了布局。假设移动设备（<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'
);
},
});

请注意，

1. 这未经测试
2. 我的jquery/javascript很糟糕，但应该给你足够的继续。