search

Home  >  Q&A  >  body text

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

pre condition

  1. mx4 默认浏览器
  2. meta： width=device-width
  3. 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中文网2877 days ago644

reply all(2)I'll reply

  • PHP中文网

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

    Complete the judgment conditions for ipad: @media only screen and ( min-device-width : 768px ) and ( max-device-width : 1024px ) and ( orientation : landscape ){ /Styles /}

    You can use @media screen and (device-width:1152px){ /Styles/ } to detect whether the device-width used on mx4 is equal to screen.width.
    But, according to my current knowledge, the poster's situation should not be wrong. I don't have mx4 at hand, so I can't test it.
    Of course, it is also possible that @media only screen and ( min-device-width : 768px ) is interpreted incorrectly on mx4 and is simply ignored, which will also fall into this area.

    reply
    0
  • 大家讲道理

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

    You may not have set the 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>

    Among them, target-densityDpi=medium-dpi is more important. If you don’t understand the concept of dpi, I suggest you check it out.

    reply
    0
  • Cancelreply