saber酱的抱枕

Fly me to the moon

11/21
09:00
软件

手机QQ浏览器的坑

今天上线了一个手机站,然后我打算在手机上看看效果。考虑到兼容性,我就不用chrome了,安装了个手机QQ浏览器,看看有什么新发现。

问题1:不支持background-size的简写。如下简写方式:

background: url(../images/jjtitbg.png) 0 0 no-repeat/100%;

和分开写应该是等价的:

background: url(../images/jjtitbg.png) 0 0 no-repeat;
background-size: 100%;

chrome浏览器的pc和移动版都支持简写,但是qq浏览器不行,直接判定这条规则无效,不显示背景图了。没想到X5内核竟恐怖如斯。我去QQ浏览器的论坛上提建议,结果帖子竟然无法提交。你开心就好。


问题2:1px问题

比如1px的边框,我用的是rem的自适应写法,是0.01rem,在小屏幕上的计算结果可能会小于1。不过chrome仍然可以显示为1像素的,QQ浏览器直接不显示了。以后边框还是使用1px稳妥。


问题3:模板字符串

QQ浏览器不支持ES6的模板字符串,我只好改成传统的用加号拼接的字符串。

传统的用引号输出字符串时,如果有换行或者穿插的有变量,就要用加号拼接,有时还需要转义特殊字符。模板字符串统统不需要,一对反引号(`)解决所有问题。

// 传统方式
let a='.foot_fixed2 a:nth-child(1) {' +
    'width: 1.52rem;' +
    'text-indent: .73rem' +
'}';

// 模板字符串
let a=`.foot_fixed2 a:nth-child(1) {
    width: 1.52rem;
    text-indent: .73rem
}`;

问题4:scrollTop 问题

如果要让页面直接滚动到顶部或者底部,根据浏览器的不同,需要使用根节点或 body 节点中的一个。

document.documentElement.scrollTop
// 或者
document.body.scrollTop

我觉得第一个应该更标准,但是qq浏览器用的是第二个。

手机QQ浏览器的坑