html - Screen.width/$(window).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()的值决定了样式表

在我的 ipad 模拟器中的 safari mobile 中，纵向模式 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 给设备宽度，就好像你在纵向模式下拿着设备一样。您可以使用“orientation : landscape”CSS 实现不同的纵向和横向样式。

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

希望对你有帮助