css3 - css媒体查询在chrome浏览器手机模拟器上调试成功,但手机上却不行的情况
PHP中文网
PHP中文网 2017-04-17 11:44:30
0
9
909

以前没遇到过这种情况,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浏览器能正常显示,具体哪里不兼容我凌乱了,求解答

PHP中文网
PHP中文网

认证高级PHP讲师

reply all(9)


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

阿神

Your brackets are wrong

刘奇

@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

小葫芦

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.

刘奇

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

伊谢尔伦

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

Peter_Zhu

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

阿神

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

阿神

Add the prefix and see -webkit

Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template