Question

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

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

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

如何做到这一点？

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>

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

1 个答案: