h5開發在ios瀏覽器遇到的坑

1.click事件；

要在css中加上cursor: pointer;ios的點擊才有效

 

2.margin-bottom問題；

在ios上，最后一個元素加margin-bottom無效。

 

3.時間轉化問題

由時間轉時間戳時

new Date('2019-07-3 11:22:32').getTime(); //蘋果顯示NAN

在ios上 new Date("2019-07-3 11:22:32".replace(/-/g,'/')).getTime(); //問題解決

蘋果不識別-。要寫成 /

 

4.position: fixed中的input框聚焦軟鍵盤彈出，IOS下會有光標錯位問題

// IOS 9 實測有效 html, body { -webkit-overflow-scroll: touch; }

廣州VI設計公司https://www.houdianzi.com

5.滾動穿透問題

（實測的此方法兼容性最好，兼容IOS，實測iphone X也有效）

body.overflowHide { position: fixed; top: 0; left: 0; width: 100%; }

彈窗展開時給body增加，同時記錄

const top = window.scrollY;

動態設置top為-${top}px ，彈窗收起時移除該class，設置top為0，調用window.scrollTo(0, top)恢復原滾動位置