Screen.width/ $(window).width() 媒体查询答案

【问题标题】：Screen.width/ $(window).width() Media QueiresScreen.width/ $(window).width() 媒体查询
【发布时间】：2013-12-12 08:12:14
【问题描述】：

所以似乎在移动设备中媒体查询使用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" />

我不知道这是否会影响任何事情。

【问题讨论】：

标签： html css media-queries

【解决方案1】：

根据本网站http://www.javascriptkit.com/dhtmltutors/cssmediaqueries2.shtml Iphone 和 ipad 给出的设备宽度就像您以纵向模式握住设备一样。您可以使用“orientation : Landscape”css 来实现纵向和横向的不同样式。

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

希望对你有帮助

【讨论】：