在解决问题方面,尤其是在解决兼容性方面,兼容ios10以及Android5,做了些总结:
-
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
-
定位问题,绝对定位或者固定定位,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; } }
-
在有安全区域的手机中,一定要写兼容性的CSS。比如bottom: env(safe-area-inset-bottom),这样写在有安全区域和高版本手机里面没有问题,但是在低版本是不识别的,就需要这样写:
bottom: 0px; // 替换成自己的px值 bottom: env(safe-area-inset-bottom);
-
在ios10中,父元素是flex:1(flex-grow:1),子元素的高度设置为100%时不生效,解决办法,父元素相对定位,子元素绝对定位处理。
父元素:
flex:1;(flex-grow:1); position:relative;
子元素:
position:absolute; top:0; right:0; bottom:0; left:0;
-
在ios10中遇到for of不兼容问题,可以使用for循环遍历来兼容;
-
在Android5中,会出现白屏现象,调试ts会报错,基本就是es6/es7不兼容问题,这时解决方案一般是采用babel-polyfill,不过babel-polyfill已经几年没有维护了,有最新的替代方案就是引入:
import 'core-js/stable'; import 'regenerator-runtime/runtime'; // fetch由于api比较新在低版本均不支持,可以引入 import 'isomorphic-fetch'; 或者 import 'whatwg-fetch';
版权声明:本文为dachaoxuexi原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。