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()的值决定了样式表

在我的ipad模拟器中以纵向模式screen.width进行的safari mobile是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给出设备宽度，就像您将设备保持在纵向模式一样。您可以使用“orientation：landscape”css来实现纵向和横向的不同样式。

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

希望这有帮助

Screen.width / $（window）.width（）媒体查询

1 个答案: