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

【问题标题】：Set two different viewports setting via CSS or Javascript通过 CSS 或 Javascript 设置两个不同的视口设置
【发布时间】：2016-09-10 04:40:50
【问题描述】：

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

第一个视口设置适用于宽度超过 680 像素的设备（尤其是 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;
}
}

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

谢谢你们！

【问题讨论】：

这不是 WordPress 特定的，而是 Javascript / CSS 特定的，最好在 Stack Overflow 上询问。
width: width=device-width; 甚至无效。

标签： javascript html css media-queries device-width

【解决方案1】：

CSS 设备适配（@viewport at-rule）目前没有得到很好的支持。具体来说，它在 Safari 桌面或移动设备上不受支持，并且仅在版本 29 后的移动 Chrome 中受支持。IE/Edge 需要一个特殊的前缀。所以你不应该依赖它来进行当前的开发，因为它可能在不同平台上表现得不一致。

参考：https://developer.mozilla.org/en-US/docs/Web/CSS/@viewport

【讨论】：

【解决方案2】：

尝试一下：

@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;
 }
}

你可以看到这个问题：How to make the body width equal to the device-width automatically in CSS3 media query?

还有这篇 CSS-Tricks 帖子：https://css-tricks.com/viewport-sized-typography/

希望对你有帮助

【讨论】：