通过CSS或Javascript设置两个不同的视口设置

我正在尝试为不同的浏览器宽度设置两种不同的视口设置

第一个视口设置适用于宽度大于680px的设备（尤其是iPad和桌面设备）：

680px以下设备的第二个视口：

我试图解决视口宽度CSS媒体查询，以便能够询问当前浏览器宽度：

    @media only screen and (min-width: 681px) {
 @viewport {
width: 1160px;
}
}

@media only screen and (max-width: 680px) {
 @viewport {
width: width=device-width;
 zoom: 1;
}
}

但是，我的视口似乎被浏览器忽略了。有人有个想法，问题是什么

谢谢你们

CSS设备自适应（@viewport at规则）目前不受很好的支持。具体来说，Safari桌面或移动设备不支持它，自版本29起，仅在移动Chrome中支持它。IE/Edge需要一个特殊的前缀。因此，您不应该在当前的开发中依赖它，因为它在不同平台上的行为可能不一致

参考资料：

试一试：

@media only screen and (min-width: 681px) {
 @viewport {
  width: 1160px;
 }
}

@media only screen and (max-width: 680px) {
 @viewport {
  /* That will set the element to 100% of the viewport's width */
  width: width: 100vw; 
  zoom: 1;
 }
}

你可以看到这个问题：

这篇文章：

---

希望它有帮助

这不是特定于WordPress的，而是特定于Javascript/CSS的，最好在堆栈溢出时询问。

width:width=devicewidth甚至都无效。