前端 - 安卓retina屏幕css里邊的device-width 判斷有問題
問題描述
pre conditionmx4 默認瀏覽器 meta： width=device-widthwindow.innerWidth = 384 ， window.devicePixelRatio = 3， screen.width = 1152 問題css// ipad的media query 被適配到了mx4上@media only screen and (min-device-width : 768px) and (orientation : portrait) { }
iphone下正常 ，同樣地問題在華為貓客也有。
猜測的原因： css 里邊 device-width的判斷按照屏幕分辨率（1152）來計算，不是按照瀏覽器設(shè)置device-width（381）來計算
求大神支招解答！！！！！！
問題解答
回答1：將ipad的判斷條件補齊：@media only screen and ( min-device-width : 768px ) and ( max-device-width : 1024px ) and ( orientation : landscape ){ /Styles/}
你可以使用@media screen and (device-width:1152px){ /Styles/ }來檢測mx4上使用到的device-width是否等于screen.width。but，據(jù)我目前的知識，樓主的情況不應(yīng)該啊，手邊沒有mx4，測不到。當(dāng)然還有可能的情況是@media only screen and ( min-device-width : 768px ) 在mx4上的解讀出錯直接忽略，這樣也會落在這個區(qū)域里。
回答2：你可能沒有設(shè)置viewport吧：
<head> ... <meta name='viewport' content='width=device-width, target-densityDpi=medium-dpi, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no'> ...</head>
其中target-densityDpi=medium-dpi比較重要，關(guān)于dpi的概念如果不了解的話，建議你去查一下。
相關(guān)文章：
1. mysql - 如何減少使用或者不用LEFT JOIN查詢？2. python - Scrapy存在內(nèi)存泄漏的問題。3. Python爬蟲如何爬取span和span中間的內(nèi)容并分別存入字典里？4. python - 我在使用pip install -r requirements.txt下載時，為什么部分能下載，部分不能下載5. 視頻文件不能播放，怎么辦？6. mysql - 分庫分表、分區(qū)、讀寫分離 這些都是用在什么場景下 ，會帶來哪些效率或者其他方面的好處7. mysql - jdbc的問題8. html5 - H5 audio 微信端 在IOS上不能播放音樂9. python - 編碼問題求助10. mysql - 千萬級數(shù)據(jù)的表，添加unique約束，insert會不會很慢？
網(wǎng)公網(wǎng)安備