html - 媒体查询 : smartphone-landscape is executing for 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)" />

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

Answer 1

引用 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)" />