各手机各浏览器上的天坑集合

Posted 梁乾顺

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了各手机各浏览器上的天坑集合相关的知识,希望对你有一定的参考价值。

  1. ios6上移除某元素请用removeChild(),而不能用remove()。remove()在IOS7之后才得到支持。

    eg:
    
    chileNode.parentNode.removeChild(childNode);  //both ok
    childNode.remove();      //ios7+ 
    
  2. 新版微信安卓版使用的QQ浏览器X5内核,如果页面上有手机号,浏览器会自动给这个手机号外加一个a标签,在处理样式时要给这个a标签预留样式。目前主要表现在小米3与小米4上。(又或者这个a标签是小米的ROM给加上的,而与X5内核无关。)

    eg:
    
    style:
    #phone{xxxx}
    #phone a{display:inline-block;width:80px;xxxxxxxxxx} /*this style is important*/
    
    html:
    <div id="phone"> 
        <a faketel="13000000102" style="text-decoration:none;color:xxxxxx">13000000102</a>
    </div>
    
  3. 新版微信安卓版使用QQ浏览器X5内核的原因,userAgent在微信中也会包含MQQBrowser字符,但是在微信中的MicroMessenger这个标识符是还存在的。所以要用userAgent来判断当前的浏览器的话,示例如下

    qq browser:
    if(useragent.indexOf("MQQBrowser")!=-1 && useragent.indexOf("MicroMessagener")==-1){
        console.log("this is QQ browser");
    }
    
    webchat browser:
    if(useragent.indexOf("MicroMessagener")!=-1){
        console.log("this is webchat browser");
    }
    
  4. 动态用js设置元素的backgroundImage的一个小坑,比如在CSS中已经给元素div设置了background-image,且同时设置了background-size

    div{
        background-image:url(‘xxxxx.png‘);
        background-size:320px;
    }
    

    然后因为业务的需要,需要用js动态的来改变div的背景图片,这时候background-size是不会被继承的,所以如果改变背景后backgroundsize不是默认的话必须要重新配置。

    div.style.backgroundImage="url(‘abcefg.png‘)";
    div.style.backgroundSize="320px"; 
    
  5. 页面中js动态的给元素加上背景图片,如以下方式

    var bg="";
    div.style.backgroundImage="url(‘"+bg+"‘)";
    

    如果这个路径为变量,且有可能为空串,一定要做验证,如果把空串传到url中,会重复发一次当前页面url的请求,每个DOM元素都会有一个baseURI的属性,该属性指向当前页面的url。

    此处另外一个点在于,background-image:url()这个CSS属性或在js设计backgroundImage时url这个方法中的图片路径是否需要加引号?答案是必须加,从两个方面来说。

    5.1 安全考虑。如果不加容易被xss 因为""意味着是字符串...但是不加引号的话..传过来的万一是url("http://www.xss.xss") 就把cookie什么的可能泄露出去了...

    5.2 CSS规范中就要求加上引号,还有一个问题就是在使用LESS时,可能会要用到LESS的变量,如果不加引号在使用LESSC编译成CSS文件时,LESS变量不会被编译为正确的图片路径.

    5.3 最后总结就是,不要给background-img:url()以及img的src属性设置空值,不然会多一个当前url的无用请求.

  6. 关于windows.screen.height与window.innerHeight(这一块可以再详细描述)

    windows.screen.width

    windows.screen.height

    上面这两个属性多数的内核下表示当前屏幕的宽高

    但是!!!!!!安卓部分机型上这个高度就明显的不准确,都猜不透它到底是怎么算的。

    然后要屏幕的高度时请使用window.outerHeight,这个属性支持绝大多数的浏览器

    还有一个属性是window.innerHeight,这个值不包含工具条,滚动条的高度

  7. 关于android下的圆角问题

    安卓下图片如果只在父容器上使用border-radius:50%;部分机型上会有问题,图片不会被圆角,还是方的且会伸出父窗口的圆角外。

    解决方案:

    div{
        border-radius:50%;
        overflow:hidden;
        border:0.5rem solid rgba(0,0,0,0.8);
        z-index:2;
    }
    img{
        border-radius:50%;
        z-index:1;
    }
    

    IOS上没有这个问题。如果图片圆形还要有一个外边框的话,就一定要把边框放在父容器上。如果把border跟border-radius都放在图片上,部分安卓机器的问题就是图片还是不会成圆形,会跟边框合在一起成为一个圆形。

  8. 各屏幕适配的问题

    做屏幕适配时常用的方法是CSS3的media query,这种方案的缺点在于CSS代码会比较冗余,然后对于不同尺寸的屏幕覆盖不够。为了代码能够更简洁,更方便维护,所以选择用rem.以iphone4的屏幕宽度做为一个标准,然后用js来算出当前屏幕适合1rem=XX px.

    代码如下:

    var docuH = document.documentElement.clientHeight,
        docuW = document.documentElement.clientWidth,
        html = document.getElementsByTagName(‘html‘)[0];
    var num = docuW / 320;
    html.style.fontSize = 12 * num + "px";
    

    rem就是以html根结点做为基准,rem是一个相对的单位而不是绝对单位,在html设置1rem=xx px表示设置当前CSS文档流中1rem的默认值。

    至于为什么要用320(iphone4)的尺寸来做为一个标准,这个不是标准,也可以用iphone6的屏幕宽度来做为根据,就看要用哪个尺寸来做这个1rem的标准了。不过个人推荐使用320的尺寸,因为移动端最小字号为12px(这个是多数情况下),如果用iphone6的来做1rem的标准,在iphone4上得出来的结果是1rem会小于12px,虽然多数机器在小于12px时也会显示12px,但是!!!!!!!!!我就遇到过安卓机器上能显示小于12px的字体。在移动端小于12px的字体对于阅读是影响很大的。

以上是关于各手机各浏览器上的天坑集合的主要内容,如果未能解决你的问题,请参考以下文章

pandas GroupBy上的方法apply:一般性的“拆分-应用-合并”

Android 事件分发事件分发源码分析 ( Activity 中各层级的事件传递 | Activity -> PhoneWindow -> DecorView -> ViewGroup )(代码片段

各手机屏给网页使用的尺寸比

苹果手机备份文件目录各文件啥位置

android手机各大分区详解

如何使用手机访问电脑上的视频