锋言锋语

NferZhuang的自留地

Android QQ内置浏览器坑-20171214

背景

我们有一个页面是采用的rem布局,在QQ内置浏览器上打开发现有些div的背景图片大小显示异常,而在PC端或手机的其他浏览器上都是显示OK的。

通过添加border的方式,首先确认了div本身的大小是OK的,所以问题十有八九是在background-size的设置上,下面就是详细测试和分析。

测试页面结构

<style type="text/css">
    .test {
        border: 1px solid red;
        width: 15rem;
        height: 10rem;
        background: url('icon.jpg') center/contain no-repeat;
    }
    .test-background-size {
        background-size: contain;
    }
</style>

    <div class="test"></div>
    <div class="test test-background-size"></div>

为了简化测试,页面只有两个div元素,两个div元素的基本css属性都是设置了border,width,height和background,第二个元素又单独设置了一下background-size属性。

注意:这里实际上我们并不关心div的大小,所以不需要关心font-size的值是多少。

页面显示效果

第一轮的测试结果如下图所示:

result1

很明显,第一个div的背景图显示是异常的。

第二轮测试

为了排除是否是rem引入的问题,我们把width和height的单位都换成px:

        width: 150px;
        height: 100px;

测试结果如下:

result2

其实,仔细看的话,测试1和测试2的第一个图,背景图的大小实际都是图片的原始大小。

第三轮测试

为了准确验证,div1的背景图大小是原始大小,我又做了一个测试,修改width和length大于图片原始大小(200×200)的场景

        width: 300px;
        height: 300px;

测试结果清晰显示,div1的背景图大小显示的仍然是图片原始大小,并没有按照contain的方式进行缩放

result3

第四轮测试

注意上面设置background-size的时候,使用了contain,我们试一下cover的情况,显示结果和contain的时候是完全一致的,这里就不尽兴贴图了。

结论验证

在手机上调试,可以引入vconsole.min.js,添加下述调试代码:

<body>
    <div id="test1" class="test"></div>
    <div id="test2" class="test test-background-size"></div>
</body>
<script src="vconsole.min.js" type="text/javascript"></script>
<script type="text/javascript">
(function (document, window) {
    var test1 = document.getElementById("test1")
    var test2 = document.getElementById("test2")
    console.log('test1 background-size:', window.getComputedStyle(test1).backgroundSize)
    console.log('test2 background-size:', window.getComputedStyle(test2).backgroundSize)
})(document, window);
</script>

测试,在pc以及其他手机上,显示的都是:

test1 background-size: cover
test2 background-size: cover

而在QQ内置浏览器上,显示的却是:

data1

可以明确的看到div1的background-size的值是错误的,并不是设置的值,而是采用了默认值。

特别注意

 

  1. 测试机型:小米note4x MIUI V8.5.7.0
  2. QQ版本:V7.3.2.3350,在小米官方商店下载
  3. 为了排除影响,每次测试都是删除APP,重新下载,然后再打开页面
  4. 上面的截图实际上都是竖向的,为了排版,做了90度旋转

 

总结

  • 走的路多了,总会踩到坑上
  • 移动端善用vconsole.min.js调试工具
  • 多对比,多测试,精确定位问题
文 / nfer
LEAVE A REPLY

loading