根据设备宽度更改视口标签？

Question

关于视口元标记，我想在不同的屏幕尺寸下建立不同的视口。

• 默认情况下，我希望视口为“width=1024”
• 在设备宽度低于768px时，我希望视口为“width=device-width,initial-scale=1”

这样做的原因是我想为平板电脑设置一个非流体布局，当你垂直翻转它们时会缩放，但我想为移动设备设置不同的布局。

如何实现？

- develdevil

---

我所知道的唯一方法是使用JavaScript在特定的屏幕宽度/分辨率下更改视口属性。请参考这里：http://www.quirksmode.org/blog/archives/2011/06/dynamically_cha.html - undefined

这个方法是有效的，但是我不得不做一些修改以使其更加明确。链接中的脚本检查窗口宽度，但在处理较新的移动设备时可能会产生误导和笨拙的情况。例如，新款 iPhone 6 的窗口宽度比 iPad 2 大，尽管它是一个较小的设备。因此，我改为检查 screen.width，并根据窗口方向来使用 screen.height（如果是横屏）。 - undefined

Answer 1

使用cjspurg上面发布的链接作为起点，最终我想出了一种可靠地检测屏幕宽度（以 CSS 像素为单位）并相应设置视口的方法：

<meta id="testViewport" name="viewport" content="width=1024">
<script>
var sw = screen.width;
var sh = screen.height;
if ( window.matchMedia("(orientation: landscape)").matches ) {
  var fw = sh;
} else {
  var fw = sw;
}
if (fw < 768) {
    var mvp = document.getElementById("testViewport");
    mvp.setAttribute("content","width=device-width,initial-scale=1");
}
</script>

- develdevil

---

对于jQuery，meta标签不需要ID：$（'meta [name ="viewport"]'）.attr（'content'，'width = device-width，initial-scale = 1'）; - undefined

确切地说，这正是我所需要的，但是在我搜索“允许用户在移动设备上缩小内容”的时候，我在谷歌上找不到这个答案，所以我现在写下这个评论，供未来的搜索者参考。 - undefined