前端 - 安卓retina屏幕css里邊的device-width 判斷有問題
問題描述
pre conditionmx4 默認(rèn)瀏覽器 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的判斷條件補(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/ }來檢測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. node.js - mysql如何通過knex查詢今天和七天內(nèi)的匯總數(shù)據(jù)2. mysql 插入數(shù)值到特定的列一直失敗3. 360瀏覽器與IE瀏覽器有何區(qū)別？？？4. Python從URL中提取域名5. mysql - 百萬行的表中是否盡量避免使用update等sql語句？6. python - 在使用Pycharm時經(jīng)常看到如下的樣式，小括號里紅色的部分是什么意思呢？7. javascript - 新浪微博網(wǎng)頁版的字?jǐn)?shù)限制是怎么做的8. 怎么在網(wǎng)頁中設(shè)置圖片進(jìn)行左右滑動9. javascript - 豆瓣的這個自適應(yīng)是怎么做的？10. javascript - 用jsonp抓取qq音樂總是說回調(diào)函數(shù)沒有定義
網(wǎng)公網(wǎng)安備