-1

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

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

宽度小于 680 像素的设备的第二个视口：

我试图解决视口宽度 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;
}
}

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

感谢你们！

4

2 回答 2

0

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

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

于 2016-09-09T18:22:41.820 回答
0

尝试什么：

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

你可以看到这个问题：如何在 CSS3 媒体查询中自动使正文宽度等于设备宽度？

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

希望能帮助到你

于 2016-09-09T18:26:15.400 回答