html - 我的网站在 iPad 中的媒体查询失败

Question

我的媒体查询似乎不适用于 ipad。网址是http://www.purplesale.com .在最后的 css 中，我为 ipad 应用了媒体查询 -

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
#mainContent, #container, #sidebar, #content, #footer, #betaSpacer {
    width: 765px;
    overflow: hidden;
}
// Other queries targeting ipad

}
/*End*/

完整的 CSS 在这里 - http://www.purplesale.com/Css/main.css

在 meta 中设置的视口(viewport)是 -

<meta name="viewport" content="width=device-width, initial-scale=1" />

请帮忙解决问题。

Answer 1

如果 Ipad 具有视网膜显示屏 (ipad 3 & 4)

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px)
and (-webkit-min-device-pixel-ratio: 2) { /* STYLES GO HERE */}