H5移動端開發(fā)問題及解決方法

一莫绣、iOS 滑動不流暢

上下滑動頁面時會產(chǎn)生卡頓畴蒲，手指離開頁面后，頁面立即停止運(yùn)動对室。

解決方法：

在 iOS 5.0 以及之后的版本模燥，滑動有定義有兩個值?auto?和?touch咖祭，默認(rèn)值為?auto：

-webkit-overflow-scrolling:touch;/* 當(dāng)手指從觸摸屏上移開，會保持一段時間的滾動 */

-webkit-overflow-scrolling:auto;/* 當(dāng)手指從觸摸屏上移開蔫骂，滾動會立即停止 */

二么翰、iOS上拉或者下拉頁面時出現(xiàn)空白

手指按住屏幕下拉，屏幕頂部會多出一塊白色區(qū)域纠吴；當(dāng)手指按住屏幕上拉硬鞍，底部多出一塊白色區(qū)域。原因是在 iOS 中戴已，手指按住屏幕上下拖動，會觸發(fā)?touchmove?事件锅减。這個事件觸發(fā)的對象是整個?webview?容器糖儡，容器自然會被拖動，剩下的部分會成空白怔匣。

解決方法：

通過監(jiān)聽?touchmove握联，讓需要滑動的地方滑動，不需要滑動的地方禁止滑動：

document.body.addEventListener('touchmove',function(e){

????if(e._isScroller) return;

????e.preventDefault();

}, {

????passive:false

})

三每瞒、軟鍵盤將頁面頂起來金闽，input失焦后頁面沒有回彈

點(diǎn)擊input框時，鍵盤彈出剿骨，將頁面頂起來代芜，導(dǎo)致頁面樣式錯亂。移開焦點(diǎn)時浓利，鍵盤收起挤庇，鍵盤區(qū)域空白，頁面未回落贷掖。

解決方法：

解決辦法為嫡秕，在聚焦時，獲取當(dāng)前滾動條高度苹威，然后失焦時昆咽，賦值之前獲取的高度：

focus() {

????this.scrollTop =document.scrollingElement.scrollTop;

blur() {

????document.scrollingElement.scrollTo(0,this.scrollTop);

}

四、調(diào)用系統(tǒng)的功能

五牙甫、打開原生應(yīng)用

<a href="alipays://">打開支付寶</a>

<a href="alipays://platformapi/startapp?saId=10000007">打開支付寶的掃一掃功能</a>

<a href="alipays://platformapi/startapp?appId=60000002">打開支付寶的螞蟻森林</a>

這種方式叫做URL Scheme掷酗，是一種協(xié)議，一般用來訪問APP或者APP中的某個功能/頁面（如喚醒APP后打開指定頁面或者使用某些功能）腹暖。

注：

1.喚醒APP的條件是你的手機(jī)已經(jīng)安裝了該APP汇在；

2.某些瀏覽器會禁用此協(xié)議，比如微信內(nèi)部瀏覽器（除非開了白名單）脏答。

六糕殉、忽略自動識別為號碼或郵箱

1. 忽略瀏覽器自動識別數(shù)字為電話號碼

2.忽略瀏覽器自動識別郵箱賬號

當(dāng)頁面上的內(nèi)容包含了手機(jī)號/郵箱等亩鬼，會自動轉(zhuǎn)換成可點(diǎn)擊的鏈接，比如<p>13192733603</p>阿蝶，有些瀏覽器會識別為手機(jī)號雳锋，并且可以點(diǎn)擊撥號。

七羡洁、禁止長按

1.禁止長按圖片保存

img {

-webkit-touch-callout:none;

pointer-events:none; // 像微信瀏覽器還是無法禁止玷过，加上這行樣式即可

}

2.禁止長按選擇文字

* {

? -webkit-touch-callout:none; /*系統(tǒng)默認(rèn)菜單被禁用*/

? -webkit-user-select:none; /*webkit瀏覽器*/

? -khtml-user-select:none; /*早期瀏覽器*/

? -moz-user-select:none; /*火狐*/

? -ms-user-select:none; /*IE10*/

? user-select:none;

}

但是這樣寫的話在ios上會出現(xiàn)輸入框無法輸入的問題，所以要加上以下代碼

input,

textarea {

? -webkit-user-select:text;

}

3.禁止長按呼出菜單

div {

-webkit-touch-callout:none;

}

八筑煮、屏幕旋轉(zhuǎn)為橫屏?xí)r辛蚊，字體大小會變

* {

? -webkit-text-size-adjust:100%;

}

文章參考來源：公眾號全棧前端精選以及前端宇宙情報局

最后編輯于：2021.01.11 13:52:41

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者