使用CSS媒體查詢,您可以用于max-device-width定位設備寬度(例如iPhone或Android設備)和/或max-width定位頁面寬度的。如果使用max-device-width,則在更改桌面上瀏覽器窗口的大小時,CSS不會更改,因為您的桌面不會更改大小。如果使用max-width,則在更改桌面上瀏覽器窗口的大小時,可能會顯示面向移動的樣式,例如觸摸友好的元素和菜單等。現在已不再針對特定的瀏覽器(和設備?)定位,并且您應該對目標對象有所了解。那也適用于媒體查詢嗎?為什么要針對一個目標呢?推薦哪一個?這是我在生產網站上使用的媒體查詢的示例:@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (min-device-height: 480px) and (max-device-height: 640px) { /* Change a menu to fit the screen better, etc... */}我傾向于同時使用max-device-width和max-width。
3 回答

FFIVE
TA貢獻1797條經驗 獲得超6個贊
避免設備寬度。原因是您不知道用戶瀏覽器如何響應。
對于IOS,這似乎很簡單,至少對于Safari而言。它似乎是一個與設備方向無關的單個設備寬度響應。此外,設備寬度僅針對設備的較短側進行說明。我確實在iPhone 4S和iPad上進行了測試。無論面向哪個方向,他們都分別響應了320和768。
對于Android,它更加不可預測。我在華為Ascend Y330上測試了六個瀏覽器(Android默認瀏覽器,Chrome,Opera,Firefox,Firefox Beta,Dolphin)。響應因瀏覽器類型和方向而異。
我在帶有查詢的頁面上進行了測試(最大設備寬度:*** px),并找出需要填寫的px值才能使查詢處于真實狀態。根據瀏覽器的類型和方向,需要四個不同的值(320、480、534、800)。這使得設備寬度不可用。
- 3 回答
- 0 關注
- 686 瀏覽
相關問題推薦
添加回答
舉報
0/150
提交
取消