css3 - css媒体查询在chrome浏览器手机模拟器上调试成功，但手机上却不行的情况

Question

以前没遇到过这种情况，viewport也设置了

<meta name="viewport" content="width=device-width, initial-scale=1">

其中一个媒体查询css代码如下：

@media screen and (max-width:62rem){
.sidebar-col{
    width: 100%;
    height: 24rem;
    .sidebar-social{
        margin-top: 1rem;
    }
}
}

用chrome调试的时候界面能响应式，但用手机查看却没有效果。

补充：我觉的是兼容性问题了，我测试用了UC浏览器没有出现效果，而使用QQ浏览器能正常显示，具体哪里不兼容我凌乱了，求解答

Answer 1

Master, has this problem been solved? I am also encountering this pitfall. Please help me.

Answer 2

Your brackets are wrong

Answer 3

@media screen and (max-width:62rem) Replace screen with all, or other attribute values ​​suitable for mobile terminals
You can search and find the attribute value of screen in media queries

Answer 4

has not been verified. I think it is a problem with max-width:62rem. This is the first time I have seen using rem as the unit of media query.

Answer 5

It is possible that 62rem is too large.
After setting the viewport as above, the vertical screen width of most mobile phones is less than 500px, and the root element font-size is often 16px, so 62rem = 62*16px=992px, which means this media The query always works in portrait orientation.
But lz can try horizontal screen, which is likely to trigger this boundary value.

Another reason is that mobile browsers may have compatibility issues with rem units: http://caniuse.com/#search=rem, iOS5~5.1 does not support the mixed use of rem and media query

Answer 6

@media screen and (max-width:62rem) Change the rem here to px

Answer 7

When you simulate an iPhone 6 on a PC, the resolution it gives you is 375*667
The size you want to browse on your phone requires you to remove the bottom of the app’s head.
It is recommended to check the screen width and height with js first

Answer 8

It’s about the organization, it’s the first time I’ve seen rem used in media

Answer 9

Add the prefix and see -webkit