久久精品中文字幕av,av.涩涩涩涩涩涩涩涩,亚洲国产日韩欧美精品成人久久久,成人福利电影免费在线观看,日产国产原创av,日韩av午夜激情,bt天堂中文字幕,超级碰人妻在线视频,欧美老熟妇久久一区二区

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