html - 媒体查询：正在为 iPad 执行智能手机横向

Question

我有这样的 CSS 媒体查询

<!-- Common Styles sheet for desktops/tablets/iPads -->
<link rel="stylesheet" href="css/styles.css" />
<link rel="stylesheet" href="css/smartphone.css" media="only screen and (min-device-width : 20px) and (max-device-width : 480px)" />

<link rel="stylesheet" href="css/smartphone-landscape.css" media="only screen and (min-width : 321px)" />
<link rel="stylesheet" href="css/ipad-landscape.css" media="only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape)" />

问题是智能手机-landscape.css 文件也在 iPad 上执行。我该如何预防？所以智能手机横向仅适用于 iPhone 的横向模式（以及类似分辨率的设备），但不适用于 iPad。

Answer 1

您必须在 ipad-landscape.css 中重新应用样式表，因为 smartphone.css 会覆盖它。

Answer 2

参考 Chris Coyer 的一篇文章，这里有一些特定的 css 代码，仅针对 ipad 和具有媒体查询的智能手机。

全文：http ://css-tricks.com/snippets/css/media-queries-for-standard-devices/

请注意仅 ipad 查询的特定“设备”参考：

/* Smartphones (landscape) ----------- */
@media only screen
and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen
and (max-width : 320px) {
/* Styles */
}

/* iPads (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* Styles */
}

所以在你的情况下：

<!-- Common Styles sheet for desktops/tablets/iPads -->
<link rel="stylesheet" href="css/styles.css" />
<link rel="stylesheet" href="css/smartphone.css" media="only screen and (max-width : 320px)" />
<link rel="stylesheet" href="css/smartphone-landscape.css" media="only screen and (min-width : 321px)" />
<link rel="stylesheet" href="css/ipad-landscape.css" media="only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape)" />