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

Posted 2020-08-07 梁乾顺

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的字体对于阅读是影响很大的。