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

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

大神   這個問題解決了沒有 我現在也碰到這個坑了  跪求幫忙

阿神

你的括號沒對

刘奇

@media screen and (max-width:62rem)這邊screen換成all,或其他適用於行動端的屬性值
你去搜下,媒體查詢中screen這個屬性值

小葫芦

未經驗證,我覺得是max-width:62rem的問題,使用rem作為media query的單位的情況,這還是我第一次見到。

刘奇

很可能是62rem太大了。
設定如上viewport後,大多數手機的垂直螢幕寬度是小於500px的,而根元素font-size往往是16px,所以62rem = 62*16px=992px,也就是說這個媒體查詢在垂直螢幕時總是有效。
但lz可以試著橫屏,很可能會觸發此邊界值。

還有一個原因是手機瀏覽器對rem單位可能有相容性問題:http://caniuse.com/#search=rem,iOS5~5.1不支援rem和media query混用

伊谢尔伦

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

Peter_Zhu

你在pc模擬iPhone6,他給你的解析度是375*667
你在手機上瀏覽的尺寸,就需要在扣掉app的頭部底部。
建議先js偵測 螢幕寬高

阿神

單位問題吧,media我也是第一次看到用rem呢

阿神

你加上前綴看看-webkit

熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!