移动端的爬坑路

Posted 2020-09-19 asteria

暂时有几个常见的需要注意一下，防止被坑。

1、手机浏览器会突然缩小顶部栏或者干脆消失。这是由于使用了浏览器默认滑动事件造成的。所以整体项目要么都使用滑动事件，要么就只使用touch滑动事件，比如better-scroll。
2、ios对h5css position属性支持是有些问题的，比如fixed与input同时使用，会造成input获得焦点fiexd布局失效，这是对fiexd不友好支持所造成。

3、布局是移动端的一大坑，特别是一些属性其实很多手机厂商深度优化后的系统浏览器支持的不是很好，比如华为、魅族，像img span 这样的标签使用为了兼容，最好加上display block display inline-block 属性，因为block属性基本都支持，但inline-block不一定支持，但如果不加block，只加inline-block会有问题的。

4、line-hieght一定要配合height使用，否则在一部分浏览器会不支持。

5、给img加100%属性或者给img父标签加100%属性会在一部分浏览器出现兼容性问题，最好加一个具体值。

6、flex属性在移动端支持的其实没有那么好，所以使用flex布局一定要加上block属性。

 

暂时只想起这么多，以后再加。