Saber 酱的抱枕

今天上线了一个手机站，然后我打算在手机上看看效果。考虑到兼容性，我就不用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浏览器的坑