移动端浏览器爬坑之旅

Posted 无敌小坑笔

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了移动端浏览器爬坑之旅相关的知识,希望对你有一定的参考价值。

  以前总觉得移动端页面也很容易写,最近才下笔,简直五步一坑,十步一雷。查阅了些资料,整理出了部分浏览器兼容性bug

  有问题就跟浏览器客服提出来,一般他们是会处理的。那么就以二师兄展开本次分享。

  

QQ浏览器X5内核问题汇总

https://www.qianduan.net/qqliu-lan-qi-x5nei-he-wen-ti-hui-zong/

微信浏览器

因为微信浏览器屏蔽了一部分链接图片,所以需要引导用户去打开新页面,可以用以下方式判断微信浏览器的ua

function is_weixn(){
    var ua = navigator.userAgent.toLowerCase();
    if(ua.match(/MicroMessenger/i)=="micromessenger") {
        return true;
    } else {
        return false;
    }
}

后端判断也很简单,比如php

function is_weixin(){
    if ( strpos($_SERVER[\'HTTP_USER_AGENT\'], \'MicroMessenger\') !== false ) {
            return true;
    }  
    return false;
}

【UC浏览器】video标签脱离文档流

场景:标签的父元素(祖辈元素)设置transform样式后,标签会脱离文档流。

测试环境:UC浏览器 8.7/8.6 + android 2.3/4.0 。

Demo:http://t.cn/zj3xiyu

解决方案:不使用transform属性。translate用top、margin等属性替代。

 

【UC浏览器】position:fixed 属性在UC浏览器的奇葩现象

场景:设置了position: fixed 的元素会遮挡z-index值更高的同辈元素。

   在8.6的版本,这个情况直接出现。

   在8.7之后的版本,当同辈元素的height大于713这个「神奇」的数值时,才会被遮挡。

测试环境:UC浏览器 8.8_beta/8.7/8.6 + Android 2.3/4.0 。

Demo:http://t.cn/zYLTSg6

 

【QQ手机浏览器】不支持HttpOnly

场景:带有HttpOnly属性的Cookie,在QQ手机浏览器版本从4.0开始失效。javascript可以直接读取设置了HttpOnly的Cookie值。

测试环境:QQ手机浏览器 4.0/4.1/4.2 + Android 4.0 。

 

【MIUI原生浏览器】浏览器地址栏hash不改变

场景:location.hash 被赋值后,地址栏的地址不会改变。

   但实际上 location.href 已经更新了,通过JavaScript可以顺利获取到更新后的地址。

   虽然不影响正常访问,但用户无法将访问过程中改变hash后的地址存为书签。

测试环境:MIUI 4.0

 

【Chrome Mobile】fixed元素无法点击

场景:父元素设置position: fixed;

   子元素设置position: absolute;

   此时,如果父元素/子元素还设置了overflow: hidden 则出现“父元素遮挡该子元素“的bug。

   视觉(view)层并没有出现遮挡,只是无法触发绑定在该子元素上的事件。可理解为:「看到点不到」。

补充: 页面往下滚动,触发position: fixed;的特性时,才会出现这个bug,在最顶不会出现。

测试平台: 小米1S,Android4.0的Chrome18

demo: http://maplejan.sinaapp.com/demo/fixed_chromemobile.html

解决办法: 把父元素和子元素的overflow: hidden去掉。

 

使用zeptojs内嵌到android webview影响正常滚动时

https://github.com/madrobby/zepto/blob/master/src/touch.js 去掉61行,其实就是使用原生的滚动

iscroll4

iscroll4 的几个bug(来自 http://www.mansonchor.com/blog/blog_detail_64.html 内有详细讲解)

1.滚动容器点击input框、select等表单元素时没有响应】

onBeforeScrollStart: function (e) { e.preventDefault(); }

改为

onBeforeScrollStart: function (e) { var nodeType = e.explicitOriginalTarget © e.explicitOriginalTarget.nodeName.toLowerCase():(e.target © e.target.nodeName.toLowerCase():\'\');if(nodeType !=\'select\'&& nodeType !=\'option\'&& nodeType !=\'input\'&& nodeType!=\'textarea\') e.preventDefault(); }

2.往iscroll容器内添加内容时,容器闪动的bug

源代码的

has3d = \'WebKitCSSMatrix\' in window && \'m11\' in new WebKitCSSMatrix()

改成

has3d = false

在配置iscroll时,useTransition设置成false

3.过长的滚动内容,导致卡顿和app直接闪退

  1. 不要使用checkDOMChanges。虽然checkDOMChanges很方便,定时检测容器长度是否变化来refresh,但这也意味着你要消耗一个Interval的内存空间
  2. 隐藏iscroll滚动条,配置时设置hScrollbar和vScrollbar为false。
  3. 不得已的情况下,去掉各种效果,momentum、useTransform、useTransition都设置为false

4.左右滚动时,不能正确响应正文上下拉动

iscroll的闪动问题也与渲染有关系,可以参考 运用webkit绘制渲染页面原理解决iscroll4闪动的问题 iscroll4升级到5要注意的问题

iscroll或者滚动类框架滚动时不点击的方法

可以使用以下的解决方案(利用data-setapi)

<a ontouchmove="this.s=1" ontouchend="this.s || window.open(this.dataset.href),this.s=0" target="_blank" data-href="http://www.hao123.com/topic/pig">黄浦江死猪之谜</a>

也可以用这种方法

    $(document).delegate(\'[data-target]\', \'touchmove\', function () {
        $(this).attr(\'moving\',\'moving\');

    })


    $(document).delegate(\'[data-target]\', \'touchend\', function () {
        if ($(this).attr(\'moving\') !== \'moving\') {
         //做你想做的。。
            $(this).attr(\'moving\', \'notMoving\');
        } else {
            $(this).attr(\'moving\', \'notMoving\');
        }

    })

 

 

以上来源于司徒正美的github
https://github.com/RubyLouvre/mobileHack

以上是关于移动端浏览器爬坑之旅的主要内容,如果未能解决你的问题,请参考以下文章

SpringBoot + SpringCloud的爬坑之旅

移动端的爬坑路

记一次 Ubuntu 下 NVIDIA 驱动 + CUDA + CUDNN 的卸载重装爬坑之旅

Android M(6.0) 权限爬坑之旅

Vue爬坑之旅:vue单页面二级套嵌路由

Android爬坑之旅之不易发现的BUG