移動端的爬坑路

標籤：問題   ios   flex   touch   手機瀏覽器   height   bsp   標籤   移動端   

暫時有幾個常見的需要注意一下，防止被坑。

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屬性。

 

暫時只想起這麼多，以後再加。

移動端的爬坑路