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

以前没遇到过这种情况,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讲师

全員に返信(9)


マスター、この問題は解決しましたか?私もこの落とし穴に遭遇しています。助けてください。

いいねを押す +0
阿神

你的括号没对

いいねを押す +0
刘奇

@media screen and (max-width:62rem)这边screen换成all,或其他适用于移动端的属性值
你去搜下,媒体查询中screen这个属性值

いいねを押す +0
小葫芦

未经验证,我觉得是max-width:62rem的问题,使用rem作为media query的单位的情况,这还是我第一次见到。

いいねを押す +0
刘奇

很可能是62rem太大了。
设置如上viewport后,大多数手机的竖屏宽度是小于500px的,而根元素font-size往往是16px,所以62rem = 62*16px=992px,也就是说这个媒体查询在竖屏时总是有效。
但lz可以试着横屏,很可能会触发此边界值。

还有一个原因是手机浏览器对rem单位可能存在兼容性问题:http://caniuse.com/#search=rem,iOS5~5.1不支持rem和media query混用

いいねを押す +0
伊谢尔伦

@media screen and (max-width:62rem) 这里的rem改成px

いいねを押す +0
Peter_Zhu

你在pc模拟iPhone6,他给你的分辨率是375*667
你在手机上浏览的尺寸,就需要在扣掉app的头部底部。
建议先js检测 屏幕宽高

いいねを押す +0
阿神

单位问题吧,media我也是第一次看到用rem呢

いいねを押す +0
阿神

你加上前缀看看-webkit

いいねを押す +0
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート