前端 - 安卓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. python - 求一个在def中可以实现调用本def满足特定条件continue效果的方法(标题说不太清楚,请见题内描述)2. $fields = $values = [];这条代码一直定义不了,一直报错,老师的源码也是被报错的,执行不了,请问该怎么解决这个问题3. java - mybatis怎么实现在数据库中有就修改,没有就添加4. MYSQL新建用户设置可以远程访问的问题5. mysql - 我的myeclipse一直连显示数据库连接失败,不知道为什么6. linux - 为什么我在mysql的my.cnf下找不到bind-address?7. MySQL中的enum类型有什么优点?8. mysql多表联合查询优化的问题9. 求教一个mysql建表分组索引问题10. 数据库设计 - MySQL数据库主键问题
![$fields = $values = [];这条代码一直定义不了,一直报错,老师的源码也是被报错的,执行不了,请问该怎么解决这个问题](http://www.haobala.com/attached/image/news/202205/093622cb60.png)