前端 - 安卓retina屏幕css里边的device-width 判断有问题-PHP中文网问答

文章专题 AI工具学习下载问答源码最近更新

PHP

会员中心讲师中心微信公众号

前端 - 安卓retina屏幕css里边的device-width 判断有问题

PHP中文网 2017-04-17 11:10:11

[CSS3讨论组]

1035

pre condition

mx4 默认浏览器
meta： width=device-width
window.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）来计算

求大神支招解答！！！！！！

PHP中文网

认证高级PHP讲师

全部回复(2)

PHP中文网2017-04-17 11:12:11 2楼

将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上的解读出错直接忽略，这样也会落在这个区域里。

赞 +0

添加回复

大家讲道理2017-04-17 11:12:11 1楼

你可能没有设置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的概念如果不了解的话，建议你去查一下。

赞 +0

添加回复

专题推荐

更多>

热门话题

热门教程

更多>