Screen.width/ $(窗口).width()媒体查询

Question

因此，在移动设备中，媒体查询似乎使用screen.width，它根本不会改变。但是在我的桌面上，当我改变窗口大小时，screen.width保持不变，$(window).width()改变，并且应用了适当的样式表。因此，在桌面浏览器中，媒体查询使用$(window).width()，这让我感到困惑。

代码示例我的媒体查询

@media only screen and (max-width: 1050px), only screen and (max-device-width: 1050px){
 --other stuff
 background-color: lightgray;

@media only screen and (max-width: 800px), only screen and (max-device-width: 800px){
   -- other stuff
   background-color: orchid; 

在我的桌面上，screen.width是1920，$(window).width()是1027，并且应用了第一个样式表，当我缩小窗口，screen.width是1920，$(window).width()是738时，第二个样式也被应用，覆盖了第一个样式表背景色。因此，$(window).width()的值决定了样式表

在safari mobile上，在纵向模式下，我的ipad模拟器的screen.width为768，$(window).width()为768，正如预期的那样，这两个样式表都被应用了。但是当我切换到横屏模式时，screen.width是768，$(window).width()是1024，这两个样式表仍然在应用，因为第二个样式表覆盖了第一个样式表的背景色，而这是不应该的。

在我的index.html的顶部，我有这个元标签

<meta name="viewport" content="minimum-scale=1.0, maximum-scale=1.0, width=device-width, user-scalable=no" />

我不知道这会不会有什么影响。

Answer 1

据该网站介绍，http://www.javascriptkit.com/dhtmltutors/cssmediaqueries2.shtml、Iphones和ipads给出了设备宽度，就像你拿着设备处于纵向模式一样。您可以使用“方向:横向”css来实现纵向和横向的不同样式。

这个网站http://stephen.io/mediaqueries/列出了很多针对特定苹果设备的css媒体查询。

希望这能有所帮助