響應背景圖像CSS媒體查詢

Question

我已經做了一些CSS來選擇適當的設備圖像。但我不知道爲什麼它會在我的視網膜專業版15英寸上顯示bg970.png圖像。

<style> 
/* default screen, non-retina */ 
/* Smartphones (portrait and landscape) ----------- */ 
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) { 
/* Styles */ 
body{ 
    background: url("img/bg970.png") no-repeat fixed; } 

} 

/* Smartphones (landscape) ----------- */ 
@media only screen 
and (min-width : 321px) { 
/* Styles */ 
body{ background: url("img/bg970.png") no-repeat fixed; } 
} 

/* Smartphones (portrait) ----------- */ 
@media only screen 
and (max-width : 320px) { 
/* Styles */ 
body{ background: url("img/bg970.png") no-repeat fixed; } 
} 

/* iPads (portrait and landscape) ----------- */ 
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) { 
/* Styles */ 
body{ background: url("img/bg970.png") no-repeat fixed; } 
} 

/* iPads (landscape) ----------- */ 
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) { 
/* Styles */ 
body{ background: url("img/bg970.png") no-repeat fixed; } 
} 

/* iPads (portrait) ----------- */ 
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) { 
/* Styles */ 
body{ background: url("img/bg970.png") no-repeat fixed; } 
} 

/* Desktops and laptops ----------- */ 
@media only screen 
and (min-width : 1224px) { 
/* Styles */ 
body{ background: url("img/bg1224.png") no-repeat fixed; } 
} 

/* Large screens ----------- */ 
@media only screen 
and (min-width : 1824px) { 
/* Styles */ 
body{ background: url("img/bg1824.png") no-repeat fixed; } 
} 

/* iPhone 4 ----------- */ 
@media 
only screen and (-webkit-min-device-pixel-ratio : 1.5), 
only screen and (min-device-pixel-ratio : 1.5) { 
/* Styles */ 
body{ background: url("img/bg970.png") no-repeat fixed; } 
} 
</style> 

Answer 1

你的最後一句話是：

/* iPhone 4 ----------- */ 
@media 
only screen and (-webkit-min-device-pixel-ratio : 1.5), 
only screen and (min-device-pixel-ratio : 1.5) { 
/* Styles */ 
body{ background: url("img/bg970.png") no-repeat fixed; } 
} 

，但似乎適用於任何視網膜設備，包括你的Mac Pro。