2015-06-05 25 views
1

所以我創建了我的自適應網站。當我在PC上測試它並調整瀏覽器大小以檢查較小的屏幕尺寸是否正常工作時,一切正常。如何測試Retina Macbook上的響應式網站?

當我在我的主機(MacBook Pro Retina)上測試時,如果我將瀏覽器調整爲較小的尺寸,則內容的寬度太大。

我認爲這是與我使用視網膜顯示的事實有關。有什麼我需要在我的CSS做不同的事情。

我響應CSS部分看起來像這樣...

@media screen and (min-width: 220px) and (max-width: 300px), 
handheld and (min-width: 220px) and (max-width: 300px), 
screen and (min-device-width: 220px) and (max-device-width: 300px) { 

.... 

} 

@media screen and (min-width: 300px) and (max-width: 440px), 
handheld and (min-width: 300px) and (max-width: 440px), 
screen and (min-device-width: 300px) and (max-device-width: 440px) { 

.... 

} 


@media screen and (min-width: 440px) and (max-width: 720px), 
handheld and (min-width: 440px) and (max-width: 720px), 
screen and (min-device-width: 440px) and (max-device-width: 720px) { 

.... 

} 

@media screen and (min-width: 720px) and (max-width: 980px), 
handheld and (min-width: 720px) and (max-width: 980px), 
screen and (min-device-width: 720px) and (max-device-width: 980px) { 

.... 

} 

@media screen and (min-width: 980px) and (max-width: 1600px), 
handheld and (min-width: 980px) and (max-width: 1600px), 
screen and (min-device-width: 980px) and (max-device-width: 1600px) { 

.... 

} 
+0

請勿使用'device-width'。 – connexo

+0

太棒了,謝謝! – Gareth

回答

0

由於connexo說,你沒有在這種情況下使用device-widthdevice-width基本上是指設備的屏幕分辨率,這意味着如果您在桌面上調整瀏覽器大小,則媒體查詢可能無法生效。

請記住,視網膜顯示器可以像普通顯示器那樣塞入兩倍的像素量。