Question

我有2个想要使用的视口。该网站建立在一系列断点上的响应，但在某些页面上我们真的只想显示完整的桌面视图，除非它是一部手机，然后我们希望响应能够启动。

因此，在台式机，平板电脑以及介于两者之间的所有内容中，我们希望此视口不会真正响应。它只是缩放桌面页面以适应屏幕。当我手动设置它时，一切都在桌面/平板电脑上运行良好。

<meta name="viewport" content="maximum-scale=1.0" />

在移动设备上（假设在768像素下），我们想要下面的视口。当我手动设置它时，everthing在移动设备上运行良好。

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />

然后，如何根据宽度动态改变这些视口？

我试图让事情看起来像这样，但它不起作用。我怀疑是因为我的javascript存在一些缺陷。在手机上测试时，我仍然可以获得“桌面”视图。

// first set the viewport to the desktop settings
<meta id="myViewport" name="viewport" content="maximum-scale=1.0" />

// then some javascript to dynamically change
<script>
if (window.innerWidth < 768) {
    var mvp = document.getElementById('myViewport');
    mvp.setAttribute('content','width=device-width');
    mvp.setAttribute('content','initial-scale=1.0');
}
</script>

我在这里缺少什么？

一如既往，提前谢谢....

使用基于宽度的jquery动态更改视口

0 个答案: