最近一直在寫移動端頁面,因爲以前寫移動端寫的比較少,因此這次踩過許多坑。特此總結一下: javascript
一、<input type='button'>背景色在ios中的兼容性,顏色發白
解決辦法:在全局樣式中加入如下代碼:
input[type=button], input[type=submit], input[type=file], button { cursor: pointer; -webkit-appearance: none; }css
二、在vue中使用jquery weui中的地區選擇器時,經過點擊事件來初始化地區選擇器,第一次點擊無效,第二次點擊才觸發
解決辦法:在mounted生命週期中執行初始化事件,在onClose事件中調用另一個函數以獲取選擇器選擇的值。這樣在其餘地方就可使用這個值了。html
三、ios端按鈕和輸入框自帶圓角問題:
解決辦法:
-webkit-appearance : none ; /* 解決ios上按鈕的圓角問題 */
border-radius: 0; /* 解決ios上輸入框圓角問題 */vue
四、vue中點擊事件阻止冒泡:@click.stopjava
五、clipboard.js的使用:
按鈕觸發:按鈕我用的是div,pc端能正常使用,ios上失效(安卓不清楚,沒測過)。折騰很久,最後嘗試將div換成button按鈕後,pc、ios均正常jquery
六、swiper輪播圖(4.x版本)時遇到的問題:
(1)、設置slider容器可以同時顯示的slides數量:能夠設置爲數字(可爲小數,小數不可loop),或者 'auto'則自動根據slides的寬度來設定數量
(2)、slide可以根據慣性滑動:設置freeMode爲true
(3)、設定初始化時激活slide的索引:設置initialSlide的值,默認爲0
(4)、當slider容器中同時顯示多個slides時,讓激活的slides居中:設置centeredSlides爲true
(5)、分頁器樣式設置:設置pagination對象的type屬性,當type值爲bullets時,會以圓點顯示;當type值爲fraction時,則會以分式形式顯示(形如:1/三、2/三、3/3等);當type爲progressBar時,則會以進度條形式顯示,即切換slide時,上方會顯示進度條
(6)、swiper默認顯示三個,中間顯示所有,兩邊顯示部分:設置以下:
spaceBetween: 10 // 表示每一個slide間的間隔
slidesPerView:1.2 // 設置slider容器同時顯示slides的數量。
centeredSlides:true // 讓中間顯示的slides居中
(7)、swiper動態加載數據輪播滑動異常,也沒法自動輪播(自動輪播的前提是要設置autoplay:true):須要設置observer:true來啓動動態檢查器,這樣就能夠自動自動輪播了,也能手動操做了,然而新的問題來了,手動滑動後,離開滑塊,沒法繼續自動輪播,須要設置autoplay:{disableOnInteraction:false}如今就能夠正常輪播了。若是想要循環輪播,則添加loop:true(此時新的bug出現了,就是輪播的時候跳過了第一張跟最後一張,目前還未解決)。android
七、vue遮罩層阻止默認滾動事件(適用於遮罩層自己沒有滾動事件的,不然自己的滾動事件也會被阻止):@touchmove.preventios
八、h5頁面點擊元素會出現灰色背景:body {-webkit-tap-highlight-color: rgba(255, 255, 255, 0);}web
九、發現頁面在ios上能正常上下滑動,而安卓上不行,pc端也不能滑動,可是經過鼠標滾動是可行的,這時候有多是css文件中加入了touch-action:none致使的,這句代碼做用是阻止頁面滾動,將它去掉就行了。坑爹的,困擾我很久了。瀏覽器
十、ios上雙擊強制縮放問題:
解決辦法:*{touch-action: manipulation} // 該方法還能移除整個文檔的觸發延遲,對於IE10,須要使用-ms-touch-action
十一、vue圖片懶加載(vue-lazeload),不能動態切換圖片(如,切換tab時,圖片沒法動態改變)
解決辦法:爲每一個img標籤添加一個key屬性。<img v-lazy="imgUrl" :key="imgUrl">
十二、使用translate致使元素內字體模糊:
緣由:translate中的參數爲非整數。常見於translateX(百分比)、translateY(百分比), translate(百分比,百分比)。
解決辦法:由於translate中參數百分比實際上是相對於操做元素自己的寬或高的百分比,因此能夠調整所要操做的元素的寬或高,已達到百分比後的值是整數,這樣就能解決元素內字體模糊的問題
1三、App嵌入h5頁面(使用vue)
問題:若是App端須要在頁面跳轉時攔截到跳轉路徑,使用vue的路由跳轉方法時,App端是攔截不到的,由於vue是單頁面應用,根本不存在頁面的跳轉。
解決方案:使用window.location.href方法跳轉(注:若是當前頁面使用window.location.href跳轉,且路徑中帶有查詢參數,在跳轉後的頁面中仍然可使用this.$route.query來獲取查詢參數)
1四、給複選框綁定事件。
若是須要給複選框綁定選中和取消事件,能夠將checkbox用label包圍起來,給label綁定change事件,不要直接使用click事件,由於這樣獲取到checkbox的狀態是反的,換句話說他獲取的只是點擊瞬間checkbox的狀態,而不是改變後的狀態。
1五、爲元素添加多重圓角。
如:
可這樣實現:box-shadow: 0 0 0 6px rgba(255,255,255,0.60), 0 0 0 13px rgba(255,255,255,0.10);
1六、input在ios上存在重影邊框問題:
解決辦法:去掉默認樣式,上邊框的陰影,點擊時的蒙版
input { outline: none; -webkit-appearance: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }
1七、判斷是否爲微信瀏覽器:
function isWeiXin() { var ua = window.navigator.userAgent.toLowerCase(); if (ua.match(/MicroMessenger/i) == 'micromessenger') { return true; } else { return false; } }
1八、判斷當前設備是哪一種設備,如ios、安卓、移動端等等。
var browser = { versions: function () { var u = navigator.userAgent, app = navigator.appVersion; return { trident: u.indexOf('Trident') > -1, //IE內核 presto: u.indexOf('Presto') > -1, //opera內核 webKit: u.indexOf('AppleWebKit') > -1, //蘋果、谷歌內核 gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1, //火狐內核 mobile: !!u.match(/AppleWebKit.*Mobile.*/) || !!u.match(/AppleWebKit/), //是否爲移動終端 ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios終端 android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1, //android終端或者uc瀏覽器 iPhone: u.indexOf('iPhone') > -1 || u.indexOf('Mac') > -1, //是否爲iPhone或者QQHD瀏覽器 iPad: u.indexOf('iPad') > -1, //是否iPad webApp: u.indexOf('Safari') == -1//是否web應該程序,沒有頭部與底部 }; }() }
如判斷是不是ios,只須要這樣使用:browser.versions.ios。如爲true則爲ios,不然不爲ios
1九、複製功能
方法1:html部分:
<!-- 此處可爲任意標籤。 --> <p id="input">自古評論出人才</p>
js部分:
function copyContent() { var copyDOM = document.querySelector('#input'); var range = document.createRange();
// 選中須要複製的節點 range.selectNode(copyDOM);
// 執行選中元素 window.getSelection().addRange(range); var successful = document.execCommand('copy'); // 表示是否支持複製功能 try { var msg = successful console.log('Copy email command was ' + msg); } catch(err) { console.log('Oops, unable to copy'); } window.getSelection().removeAllRanges(); // 移除選中元素 }
複製方法2:
此處須要使用input標籤。
<input type="text" value="hello" id="input"> // 若是是vue下,且內容動態改變的,則能夠不用value,直接v-model便可
js部分:
var copyDOM = document.querySelector('#input'); copyDOM.select(); document.execCommand('copy'); copyDOM.blur()
20、h5頁面中判斷本地是否裝了某app,若有則打開,不然跳轉到指定連接。
function openApp (openUrl, callback) { //檢查app是否打開 function checkOpen(cb){ var _clickTime = +(new Date()); function check(elsTime) { if ( elsTime > 3000 || document.hidden || document.webkitHidden) { cb(1); } else { cb(0); } } //啓動間隔20ms運行的定時器,並檢測累計消耗時間是否超過3000ms,超過則結束 var _count = 0, intHandle; intHandle = setInterval(function(){ _count++; var elsTime = +(new Date()) - _clickTime; if (_count>=100 || elsTime > 3000 ) { clearInterval(intHandle); check(elsTime); } }, 20); } //在iframe 中打開APP var ifr = document.createElement('iframe'); ifr.src = openUrl; ifr.style.display = 'none'; if (callback) { checkOpen(function(opened){ callback && callback(opened); }); // //客戶端檢測微信直接跳應用寶連接 // var browser = BrowserInfo(); // //使用微連接 // var encodeUri = encodeURIComponent(openUrl); // if (browser.isWeixin) { // window.location.href = '你的微鏈url&android_schema='+encodeUri; // }else{ // } } document.body.appendChild(ifr); setTimeout(function() { document.body.removeChild(ifr); }, 2000); }
用的時候只需像這樣(其中openUrl爲須要打開app的連接,由app端提供,jumpUrl爲須要跳轉的指定連接):
openApp(openUrl, function (res) { if (res == 0) { window.location.href = jumpUrl } })