h5兼容性总结

在解决问题方面，尤其是在解决兼容性方面，兼容ios10以及Android5，做了些总结:

1. CSS添加前缀，可以利用postcss-loader,新建postcss.config.js，添加 ‘autoprefixer’: {},配置;然后新建.browserslistrc文件，配置兼容浏览器，ios以及Android的版本范围。

   引入postcss-loader:

    use: ['postcss-loader'],
   

   新建postcss.config.js:

   module.exports = {
     plugins: {'autoprefixer': {}},
   };
   

   新建.browserslistrc文件:

   last 5 version
   > 0.2%
   not ie <= 8
   not op_mini all
   

2. 定位问题，绝对定位或者固定定位，top,right,bottom,left中必须至少有两个才可以确定位置，否则在低版本中会出现样式错乱；

   index.less:

   .wrapper {
   	width: 100%;
   	height: 100%;
   	position: relative;
   	
   	.start-button {
   		position: absulute；
   		bottom：20px；// top right bottom left 至少出现两个
   		right: 10px;      
   	}
   }
   

3. 在有安全区域的手机中，一定要写兼容性的CSS。比如bottom: env(safe-area-inset-bottom),这样写在有安全区域和高版本手机里面没有问题，但是在低版本是不识别的，就需要这样写：

   bottom: 0px; // 替换成自己的px值 
   bottom: env(safe-area-inset-bottom);
   

4. 在ios10中，父元素是flex:1(flex-grow:1),子元素的高度设置为100%时不生效，解决办法，父元素相对定位，子元素绝对定位处理。

   父元素：

   flex:1;(flex-grow:1);
   position：relative;
   

   子元素：

   position:absolute; 
   top:0;
   right:0;
   bottom:0;
   left:0;
   

5. 在ios10中遇到for of不兼容问题，可以使用for循环遍历来兼容；

6. 在Android5中，会出现白屏现象，调试ts会报错，基本就是es6/es7不兼容问题，这时解决方案一般是采用babel-polyfill,不过babel-polyfill已经几年没有维护了，有最新的替代方案就是引入：

   import 'core-js/stable'; 
   import 'regenerator-runtime/runtime';
   // fetch由于api比较新在低版本均不支持，可以引入
   import 'isomorphic-fetch';
   或者
   import 'whatwg-fetch';