## 一、H5兼容性問題 H5在安卓機型和IOS機型或者相同機型的不同瀏覽器中的某些樣式會存在不一樣的表現，所以需要解決相應的兼容性問題 ## 二、IOS常見兼容性問題 ### 1、IOS端兼容input光標高度 - 問題癥狀：input輸入框光標，在安卓手機上顯示沒有問題，但是在蘋果手機上當點擊輸入的時候，光標的高度和父盒子的高度一樣 - 原因分析：通常我們習慣用height屬性設置行間的高度和line-height屬性設置行間的距離（行高），當點擊輸入的時候，光標的高度就自動和父盒子的高度一樣了。（谷歌瀏覽器的設計原則，還有一種可能就是當沒有內容的時候光標的高度等于input的line-height的值，當有內容時，光標從input的頂端到文字的底部） - 解決方案：高度height和行高line-height內容用padding撐開 ### 2、IOS鍵盤喚起，鍵盤收起以后頁面不歸位 - 問題癥狀：輸入內容，軟鍵盤彈出，頁面內容整體上移，但是鍵盤收起，頁面內容不下滑 - 原因分析：固定定位的元素 在元素內 input 框聚焦的時候 彈出的軟鍵盤占位 失去焦點的時候軟鍵盤消失 但是還是占位的 導致input框不能再次輸入 在失去焦點的時候給一個事件 - 解決方案： ``` changeBlur () { let u = navigator.userAgent, app = navigator.appVersion; let isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); if(isIOS){ setTimeout(() => { const scrollHeight = document.documentElement.scrollTop || document.body.scrollTop || 0 window.scrollTo(0, Math.max(scrollHeight - 1, 0)) }, 200) } } ``` - 拓展知識： position: fixed的元素在IOS里，收起鍵盤的時候會被頂上去，特別是第三方鍵盤 ### 3、IOS端h5頁面上下滑動時卡頓、頁面缺失 - 問題描述：在IOS端，上下滑動頁面時，如果頁面高度超出了一屏，就會出現明顯的卡頓，頁面有部分內容顯示不全的情況 - 解決方案：只需要在公共樣式加入下面這行代碼 ``` * { -webkit-overflow-scrolling: touch; } ``` **擴展知識：-webkit-overflow-scrolling是什么？** -webkit-overflow-scrolling 屬性控制元素在移動設備上是否使用滾動回彈效果.<br/> auto: 使用普通滾動, 當手指從觸摸屏上移開，滾動會立即停止。<br/> touch: 使用具有回彈效果的滾動, 當手指從觸摸屏上移開，內容會繼續保持一段時間的滾動效果。繼續滾動的速度和持續的時間和滾動手勢的強烈程度成正比。同時也會創建一個新的堆棧上下文。 ### 4、IOS移動端click事件300ms的延遲響應 - 問題描述：移動設備上的web網頁是有300ms延遲的，往往會造成按鈕點擊延遲甚至是點擊失效 解決方案： - fastclick可以解決在手機上點擊事件的300ms延遲 - zepto的touch模塊，tap事件也是為了解決在click的延遲問題 - 觸摸事件的響應順序為 touchstart --> touchmove --> touchend --> click,也可以通過綁定ontouchstart事件，加快對事件的響應，解決300ms延遲問題 ### 5、IOS雙擊頁面縮放禁止 - 問題描述：IOS10中自帶的Safari瀏覽器不識別meta viewport - IOS10以外解決移動端禁止頁面縮放的方法： ``` <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no"> ``` - IOS10解決方案： #### （1）禁用雙指縮放 ``` document.documentElement.addEventListener('touchstart', function (event) { if (event.touches.length > 1) { event.preventDefault(); } }, false); ``` #### （2）禁用手指雙擊縮放 ``` var lastTouchEnd = 0; document.documentElement.addEventListener('touchend', function (event) { var now = Date.now(); if (now - lastTouchEnd <= 300) { event.preventDefault(); } lastTouchEnd = now; }, false); ``` ## 三、微信瀏覽器常見兼容性問題 ### 1、填寫表單信息彈出鍵盤會把頁面頂上去，鍵盤消失的時候頁面不自動下來 解決方案：使用onblur方法在表單失去焦點的時候讓頁面滾動到最頂部。 ``` <form class="form" action="" method=""> <div> <label for="idNumber">身份證號</label><input type="text" name="idNumber" onblur="window.scrollTo(0, 0);" id="idNumber"> </div> </form> ``` ### 2、去除移動端點擊時的背景 ``` * { -webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-tap-highlight-color: transparent; } ``` ### 3、去掉input框的默認樣式 ``` input { background-color: transparent;/*背景變透明*/ filter: alpha(opacity=0); /*androd*/ appearance: none; /*去除系統默認appearance的樣式,常用于IOS下移除原生樣式(下拉框去掉右側圖標等)*/ -moz-appearance: none; -webkit-appearance: none; } ``` ### 4、音視頻不自動播放 - 原因分析：出于節省流量的初衷，IOS系統禁止音視頻自動播放 - 解決方案：使用微信的JS-SDK #### （1）先引入微信的JS-SDK ``` <script src="http://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script> ``` #### （2）然后在wx.ready中調用play方法播放 ``` var audio = document.getElementById('bgmusic'); autoPlayAudio(); function autoPlayAudio() { wx.config({ // 配置信息, 即使不正確也能使用 wx.ready debug: false, appId: '', timestamp: 1, nonceStr: '', signature: '', jsApiList: [] }); wx.ready(function() { audio.play(); }); } ``` ## 四、其他兼容性問題 ### 1、在IOS手機上，綁定click事件到非button元素的元素上，IOS下不會觸發 解決方案：元素樣式添加 cursor:pointer ### 2、在IOS中li元素按下會有陰影效果 ``` -webkit-tap-highlight-color: transparent; ``` ### 3、在IOS中，input會有內陰影 ``` -webkit-appearance:none; ``` ### 4、IOS下取消input在輸入的時候英文首字母的默認大寫 ``` <input autocapitalize="off" autocorrect="off" /> ``` ### 5、禁止IOS彈出各種操作窗口 ``` -webkit-touch-callout:none ``` ### 6、禁止IOS和android用戶選中文字 ``` -webkit-user-select:none ``` ### 7、禁止IOS識別長串數字為電話 ``` <meta content="telephone=no" name="format-detection" /> ``` ### 8、禁止IOS手機識別郵箱 ``` <meta content="email=no" name="format-detection" /> ``` ### 9、IOS系統中文輸入法輸入英文時，字母之間可能會出現一個六分之一空格 解決方案：可以通過正則去掉 this.value = this.value.replace(/\u2006/g, ''); ### 10、阻止旋轉屏幕時自動調整字體大小 ``` html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6 {-webkit-text-size-adjust:none;} ``` ### 11、在移動端修改難看的點擊的高亮效果，IOS和安卓下都有效 ``` * {-webkit-tap-highlight-color:rgba(0,0,0,0);} ``` ### 12、往返緩存問題 點擊瀏覽器的回退，有時候不會自動執行js，特別是在mobilesafari中。這與往返緩存(bfcache)有關系。 解決方法 ：window.onunload = function(){}; ### 13、Input 的placeholder會出現文本位置偏上的情況 input 的placeholder會出現文本位置偏上的情況：PC端設置line-height等于height能夠對齊，而移動端仍然是偏上，解決是設置line-height：normal ### 14、在IOS和andriod中,audio元素和video元素無法自動播放 ``` element.addEventListener('touchstart',function(){ audio.play() },false) ``` ### 15、消除 transition 閃屏 ``` -webkit-transform-style: preserve-3d; /*設置內嵌的元素在 3D 空間如何呈現：保留 3D*/ -webkit-backface-visibility: hidden; /*(設置進行轉換的元素的背面在面對用戶時是否可見：隱藏)*/ ``` ### 16、CSS動畫頁面閃白，動畫卡頓 ``` 解決方法: 1.盡可能地使用合成屬性transform和opacity來設計CSS3動畫，不使用position的left和top來定位 2.開啟硬件加速 -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); ``` ### 17、fixed定位缺陷 原因分析： - IOS下fixed元素容易定位出錯，軟鍵盤彈出時，影響fixed元素定位 - android下fixed表現要比iOS更好，軟鍵盤彈出時，不會影響fixed元素定位 - IOS4下不支持position:fixed 解決方案： 可用iScroll插件解決這個問題 ### 18、calc的兼容性處理 CSS3中的calc變量在iOS6瀏覽器中必須加-webkit-前綴，目前的FF瀏覽器已經無需-moz-前綴。 Android瀏覽器目前仍然不支持calc，所以要在之前增加一個保守尺寸。 解決方案： ``` div { width: 95%; width: -webkit-calc(100% - 50px); width: calc(100% - 50px); } ```