前端開發采坑之安卓和ios的兼容問題

文章來源：https://www.cnblogs.com/lichunyan/p/8214600.html

 

一：全局

1.阻止彈出層下面的頁面滾動

給彈出層的最外層標簽上加@touchmove.prevent

 

二：ipone

1.readonly與disabled

 在iphone下，輸入框為readonly時，點擊依然會獲得焦點；

建議設為disabled

2.button在iphone下會有默認自帶的樣式和圓角

-webkit-appearance: none;清除自帶樣式

3.button,a,img等點擊時會高亮，去除方式如下：

-webkit-tap-highlight-color：rgba(255,255,255,0);

4.不兼容new date("2017-09-08 00:00:00")  這種寫法，需要把‘-’換成‘/’：

var date="2017-09-08 00:00:00"

new Date(date.replace(/-/g, "/"))

 

 

三：android

1.輸入框獲取焦點時，軟鍵盤會遮擋，主動觸發讓輸入框上移

if (/Android/gi.test(navigator.userAgent)) {
    window.addEventListener('resize', function () {
        if (document.activeElement.tagName == 'INPUT' || document.activeElement.tagName == 'TEXTAREA') {
            window.setTimeout(function () {
                document.activeElement.scrollIntoViewIfNeeded();
            }, 0);
        }
    })
}