移动端web兼容

ios:

1.dom渲染异常（渲染一半，或不渲染，但能响应事件）

这种情况很可能是添加了-webkit-overflow-scrolling:touch造成，

safari 在设置-webkit-overflow-scrolling:touch后，会采用“懒渲染”，所谓的“懒渲染“，指只渲染当前屏幕可见部分，超出屏幕的部分不渲染，当用户拖动屏幕，并且松开手指后，才会渲染被拖到屏幕范围的ui，所以，在拖动过程中，会看到空白的区域（在某些情况下，还会发生渲染异常的情况，如：某些dom只渲染了一部分，呈撕裂状）。

解决上述问题，可强制浏览器开启gpu渲染：-webkit-transform：translate3d（0，0，0）; 

如果全局都需要可使用（不推荐）：  *：not（html）{
 -webkit-transform：translate3d（0，0，0）; 
} 

2.避免在flex：1的直接子元素中使用百分比高度
safari某些版本上，如 10.1.2，在flex布局中，如果某元素存在flex：1，且没有设置高度（flex:1会填满剩余空间，且在其他平台上，height会被flex：1屏蔽，所以一般没有设置heihgt

），那么其子元素的height如果设置为百分比，将会失效（高度设置为百分比，会相对父元素高度属性动态设置值，在flex:1填充剩余空间的策略中，

safari部分版本不会为其隐藏的height属性赋值，于是其子元素的百分比高度会因为没有参照高度而失效，与之相反的是其它浏览器会为这个隐藏的height属性赋值，从而正常解析。

），为避免这种情况，可使用height：calc（100% - ***）的布局方式替代flex布局