0

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

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

设计师为大桌面（1370 像素宽）、小桌面（990 像素）和平板电脑（620 像素）构建了布局。假设移动设备 (<620px) 将使用平板电脑版本，但会对其进行缩放。

不过，我该怎么做呢？因为视口的宽度设置为device-width，所以它会加载最小的样式表，但不会对其进行缩放。

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

非常感谢。

4

1 回答 1

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 很糟糕，但应该给你足够的继续前进。
于 2012-10-04T05:37:24.213 回答