前端 - 安卓retina屏幕css里邊的device-width 判斷有問(wèn)題
問(wèn)題描述
pre conditionmx4 默認(rèn)瀏覽器 meta： width=device-widthwindow.innerWidth = 384 ， window.devicePixelRatio = 3， screen.width = 1152 問(wèn)題css// ipad的media query 被適配到了mx4上@media only screen and (min-device-width : 768px) and (orientation : portrait) { }
iphone下正常 ，同樣地問(wèn)題在華為貓客也有。
猜測(cè)的原因： css 里邊 device-width的判斷按照屏幕分辨率（1152）來(lái)計(jì)算，不是按照瀏覽器設(shè)置device-width（381）來(lái)計(jì)算
求大神支招解答！！！！！！
問(wèn)題解答
回答1：將ipad的判斷條件補(bǔ)齊：@media only screen and ( min-device-width : 768px ) and ( max-device-width : 1024px ) and ( orientation : landscape ){ /Styles/}
你可以使用@media screen and (device-width:1152px){ /Styles/ }來(lái)檢測(cè)mx4上使用到的device-width是否等于screen.width。but，據(jù)我目前的知識(shí)，樓主的情況不應(yīng)該啊，手邊沒(méi)有mx4，測(cè)不到。當(dāng)然還有可能的情況是@media only screen and ( min-device-width : 768px ) 在mx4上的解讀出錯(cuò)直接忽略，這樣也會(huì)落在這個(gè)區(qū)域里。
回答2：你可能沒(méi)有設(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. javascript - sublime快鍵鍵問(wèn)題2. javascript - immutable配合react提升性能？3. Apache 已經(jīng)把網(wǎng)站根目錄的改為allow from all了，但是服務(wù)器還是不能訪問(wèn)？4. javascript - 移動(dòng)端上不能實(shí)現(xiàn)拖拽布局嗎？5. 實(shí)現(xiàn)bing搜索工具urlAPI提交6. vue.js - Vue 如何像Angular.js watch 一樣監(jiān)聽(tīng)數(shù)據(jù)變化7. javascript - nodejs關(guān)于進(jìn)程間發(fā)送句柄的一點(diǎn)疑問(wèn)8. phpstudy8.1支持win11系統(tǒng)嗎？9. 如何解決Centos下Docker服務(wù)啟動(dòng)無(wú)響應(yīng)，且輸入docker命令無(wú)響應(yīng)？10. css - 寫頁(yè)面遇到個(gè)布局問(wèn)題，求大佬們幫解答，在線等，急！~
網(wǎng)公網(wǎng)安備