h5兼容性总结

最新推荐文章于 2024-07-09 15:20:07 发布

大超-无痕

最新推荐文章于 2024-07-09 15:20:07 发布

阅读量1.3k

点赞数

本文链接：https://blog.youkuaiyun.com/dachaoxuexi/article/details/120825158

版权

该博客总结了针对iOS10和Android5的H5页面兼容性问题，包括CSS前缀自动添加、定位问题、安全区域CSS处理、flex布局兼容性以及在iOS10和Android5上的JS兼容性问题。通过使用postcss-loader、autoprefixer、browserslistrc配置，解决CSS兼容。在布局问题上，提出了一些具体的CSS修复策略。对于JavaScript，提到了for of的兼容性和Android5的ES6/ES7不兼容问题，建议使用babel-polyfill的替代方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在解决问题方面，尤其是在解决兼容性方面，兼容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;      
	}
}