前端 - 安卓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）来计算，不是按照浏览器设置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，据我目前的知识，楼主的情况不应该啊，手边没有mx4，测不到。当然还有可能的情况是@media only screen and ( min-device-width : 768px ) 在mx4上的解读出错直接忽略，这样也会落在这个区域里。
回答2：你可能没有设置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比较重要，关于dpi的概念如果不了解的话，建议你去查一下。
相关文章：
1. html - jQuery 移动端横向滚动会带动网页上下滑动怎么办？2. ruby - vim主题，这个主题叫什么名？3. docker安装后出现Cannot connect to the Docker daemon.4. javascript - [多图预警]reactjs点击某表格编辑内容，跳转传值this.context.router.params.id时id报错未定义5. javascript - 一个前端的自我修养6. PHP中文网定制款鼠标垫7. python2.7 - 在Eclipse开发Python，怎么去掉控制台输出的其他消息？？8. javascript - vue-cli怎么根据后端接口服务器不同 build不同接口代码？9. python - 关于爬虫爬取图片的问题？10. 致命错误: Class ’appfacadeTest’ not found
网公网安备