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

IOS6上移除某元素请用removeChild(),而不能用remove()。remove()在IOS7之后才得到支持。
```
eg:

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

style:
#phone{xxxx}
#phone a{display:inline-block;80px;xxxxxxxxxx} /*this style is important*/

html:
<div id="phone"> 
    <a faketel="13000000102" style="text-decoration:none;color:xxxxxx">13000000102</a>
</div>
```

新版微信安卓版使用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");
}

动态用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"; 
```
页面中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的无用请求.
关于windows.screen.height与window.innerHeight（这一块可以再详细描述）

windows.screen.width

windows.screen.height

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

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

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

还有一个属性是window.innerHeight，这个值不包含工具条，滚动条的高度
关于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都放在图片上，部分安卓机器的问题就是图片还是不会成圆形，会跟边框合在一起成为一个圆形。
各屏幕适配的问题

做屏幕适配时常用的方法是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的字体对于阅读是影响很大的。

一步一步，丈量脚下的路！