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) {
....
}
請勿使用'device-width'。 – connexo
太棒了,謝謝! – Gareth