移動(dòng)端H5開(kāi)發(fā)常用技巧有哪些

這篇文章主要講解了“移動(dòng)端H5開(kāi)發(fā)常用技巧有哪些”，文中的講解內(nèi)容簡(jiǎn)單清晰，易于學(xué)習(xí)與理解，下面請(qǐng)大家跟著小編的思路慢慢深入，一起來(lái)研究和學(xué)習(xí)“移動(dòng)端H5開(kāi)發(fā)常用技巧有哪些”吧！

html 篇

常用的meta屬性設(shè)置

meta對(duì)于移動(dòng)端的一些特殊屬性，可根據(jù)需要自行設(shè)置

<meta name="screen-orientation" content="portrait"> //Android 禁止屏幕旋轉(zhuǎn) <meta name="full-screen" content="yes">             //全屏顯示 <meta name="browsermode" content="application">     //UC應(yīng)用模式，使用了application這種應(yīng)用模式后，頁(yè)面講默認(rèn)全屏，禁止長(zhǎng)按菜單，禁止收拾，標(biāo)準(zhǔn)排版，以及強(qiáng)制圖片顯示。 <meta name="x5-orientation" content="portrait">     //QQ強(qiáng)制豎屏 <meta name="x5-fullscreen" content="true">          //QQ強(qiáng)制全屏 <meta name="x5-page-mode" content="app">            //QQ應(yīng)用模式

電話號(hào)碼識(shí)別

在 iOS Safari (其他瀏覽器和 Android 均不會(huì))上會(huì)對(duì)那些看起來(lái)像是電話號(hào)碼的數(shù)字處理為電話鏈接，比如：

• 7 位數(shù)字，形如：1234567

• 帶括號(hào)及加號(hào)的數(shù)字，形如：(+86)123456789

• 雙連接線的數(shù)字，形如：00-00-00111

• 11 位數(shù)字，形如：13800138000

關(guān)閉識(shí)別

<meta name="format-detection" content="telephone=no" />

開(kāi)啟識(shí)別

<a href="tel:123456">123456</a>

郵箱識(shí)別(Android)

安卓上會(huì)對(duì)符合郵箱格式的字符串進(jìn)行識(shí)別，我們可以通過(guò)如下的 meta 來(lái)管別郵箱的自動(dòng)識(shí)別：

<meta content="email=no" name="format-detection" />

同樣地，我們也可以通過(guò)標(biāo)簽屬性來(lái)開(kāi)啟長(zhǎng)按郵箱地址彈出郵件發(fā)送的功能：

<a mailto:dooyoe@gmail.com">dooyoe@gmail.com</a>

css 篇

0.5px細(xì)線

移動(dòng)端 H5 項(xiàng)目越來(lái)越多，設(shè)計(jì)師對(duì)于 UI 的要求也越來(lái)越高，比如 1px 的邊框。在高清屏下，移動(dòng)端的 1px 會(huì)很粗。

那么為什么會(huì)產(chǎn)生這個(gè)問(wèn)題呢?主要是跟一個(gè)東西有關(guān)，DPR(devicePixelRatio) 設(shè)備像素比，它是默認(rèn)縮放為 100%的情況下，設(shè)備像素和  CSS 像素的比值。目前主流的屏幕 DPR=2(iPhone 8),或者 3(iPhone 8 Plus)。拿 2 倍屏來(lái)說(shuō)，設(shè)備的物理像素要實(shí)現(xiàn) 1 像素，而  DPR=2，所以 css 像素只能是 0.5。

下面介紹最常用的方法

/* 底邊框 */ .b-border {   position: relative; } .b-border:before {   content: '';   position: absolute;   left: 0;   bottom: 0;   width: 100%;   height: 1px;   background: #d9d9d9;   -webkit-transform: scaleY(0.5);   transform: scaleY(0.5);   -webkit-transform-origin: 0 0;   transform-origin: 0 0; } /* 上邊框 */ .t-border {   position: relative; } .t-border:before {   content: '';   position: absolute;   left: 0;   top: 0;   width: 100%;   height: 1px;   background: #d9d9d9;   -webkit-transform: scaleY(0.5);   transform: scaleY(0.5);   -webkit-transform-origin: 0 0;   transform-origin: 0 0; } /* 右邊框 */ .r-border {   position: relative; } .r-border:before {   content: '';   position: absolute;   right: 0;   bottom: 0;   width: 1px;   height: 100%;   background: #d9d9d9;   -webkit-transform: scaleX(0.5);   transform: scaleX(0.5);   -webkit-transform-origin: 0 0;   transform-origin: 0 0; } /* 左邊框 */ .l-border {   position: relative; } .l-border:before {   content: '';   position: absolute;   left: 0;   bottom: 0;   width: 1px;   height: 100%;   background: #d9d9d9;   -webkit-transform: scaleX(0.5);   transform: scaleX(0.5);   -webkit-transform-origin: 0 0;   transform-origin: 0 0; }  /* 四條邊 */ .setBorderAll {   position: relative;   &:after {     content: ' ';     position: absolute;     top: 0;     left: 0;     width: 200%;     height: 200%;     transform: scale(0.5);     transform-origin: left top;     box-sizing: border-box;     border: 1px solid #e5e5e5;     border-radius: 4px;   } }

屏蔽用戶選擇

禁止用戶選擇頁(yè)面中的文字或者圖片

div {   -webkit-touch-callout: none;   -webkit-user-select: none;   -khtml-user-select: none;   -moz-user-select: none;   -ms-user-select: none;   user-select: none; }

清除輸入框內(nèi)陰影

在 iOS 上，輸入框默認(rèn)有內(nèi)部陰影,以這樣關(guān)閉：

div {   -webkit-appearance: none; }

如何禁止保存或拷貝圖像

代碼如下

img {   -webkit-touch-callout: none; }

輸入框默認(rèn)字體顏色

設(shè)置 input 里面 placeholder 字體的顏色

input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {   color: #c7c7c7; } input:-moz-placeholder, textarea:-moz-placeholder {   color: #c7c7c7; } input:-ms-input-placeholder, textarea:-ms-input-placeholder {   color: #c7c7c7; }

用戶設(shè)置字號(hào)放大或者縮小導(dǎo)致頁(yè)面布局錯(cuò)誤

設(shè)置字體禁止縮放

body {   -webkit-text-size-adjust: 100% !important;   text-size-adjust: 100% !important;   -moz-text-size-adjust: 100% !important; }

android系統(tǒng)中元素被點(diǎn)擊時(shí)產(chǎn)生邊框

部分android系統(tǒng)點(diǎn)擊一個(gè)鏈接，會(huì)出現(xiàn)一個(gè)邊框或者半透明灰色遮罩, 不同生產(chǎn)商定義出來(lái)額效果不一樣。去除代碼如下

a,button,input,textarea{   -webkit-tap-highlight-color: rgba(0,0,0,0)   -webkit-user-modify:read-write-plaintext-only;  }

iOS 滑動(dòng)不流暢

ios 手機(jī)上下滑動(dòng)頁(yè)面會(huì)產(chǎn)生卡頓，手指離開(kāi)頁(yè)面，頁(yè)面立即停止運(yùn)動(dòng)。整體表現(xiàn)就是滑動(dòng)不流暢，沒(méi)有滑動(dòng)慣性。 iOS 5.0  以及之后的版本，滑動(dòng)有定義有兩個(gè)值 auto 和 touch，默認(rèn)值為 auto。

解決方案

• 在滾動(dòng)容器上增加滾動(dòng) touch 方法

.wrapper {   -webkit-overflow-scrolling: touch; }

• 設(shè)置 overflow 設(shè)置外部 overflow 為 hidden,設(shè)置內(nèi)容元素 overflow 為 auto。內(nèi)部元素超出 body  即產(chǎn)生滾動(dòng)，超出的部分 body 隱藏。

body {   overflow-y: hidden; } .wrapper {   overflow-y: auto; }

js 篇

移動(dòng)端click屏幕產(chǎn)生200-300 ms的延遲響應(yīng)

移動(dòng)設(shè)備上的web網(wǎng)頁(yè)是有300ms延遲的，往往會(huì)造成按鈕點(diǎn)擊延遲甚至是點(diǎn)擊失效。解決方案：

fastclick可以解決在手機(jī)上點(diǎn)擊事件的300ms延遲

zepto的touch模塊，tap事件也是為了解決在click的延遲問(wèn)題

觸摸事件的響應(yīng)順序

1. ontouchstart

2. ontouchmove

3. ontouchend

4. onclick

audio 和 video 在 ios 和 andriod 中自動(dòng)播放

這個(gè)不是bug，由于自動(dòng)播放網(wǎng)頁(yè)中的音頻或視頻，會(huì)給用戶帶來(lái)一些困擾或者不必要的流量消耗，所以蘋(píng)果系統(tǒng)和安卓系統(tǒng)通常都會(huì)禁止自動(dòng)播放和使用 JS  的觸發(fā)播放，必須由用戶來(lái)觸發(fā)才可以播放。加入自動(dòng)觸發(fā)播放的代碼

$('html').one('touchstart', function() {   audio.play() })

iOS 上拉邊界下拉出現(xiàn)空白

手指按住屏幕下拉，屏幕頂部會(huì)多出一塊白色區(qū)域。手指按住屏幕上拉，底部多出一塊白色區(qū)域。

在 iOS 中，手指按住屏幕上下拖動(dòng)，會(huì)觸發(fā) touchmove 事件。這個(gè)事件觸發(fā)的對(duì)象是整個(gè) webview  容器，容器自然會(huì)被拖動(dòng)，剩下的部分會(huì)成空白。

解決方案

document.body.addEventListener(   'touchmove',   function(e) {     if (e._isScroller) return     // 阻止默認(rèn)事件     e.preventDefault()   },   {     passive: false   } )

ios 日期轉(zhuǎn)換 NAN 的問(wèn)題

將日期字符串的格式符號(hào)替換成'/'

'yyyy-MM-dd'.replace(/-/g, '/')

軟鍵盤(pán)問(wèn)題

IOS 鍵盤(pán)彈起擋住原來(lái)的視圖

• 可以通過(guò)監(jiān)聽(tīng)移動(dòng)端軟鍵盤(pán)彈起  Element.scrollIntoViewIfNeeded(Boolean)方法用來(lái)將不在瀏覽器窗口的可見(jiàn)區(qū)域內(nèi)的元素滾動(dòng)到瀏覽器窗口的可見(jiàn)區(qū)域。  如果該元素已經(jīng)在瀏覽器窗口的可見(jiàn)區(qū)域內(nèi)，則不會(huì)發(fā)生滾動(dòng)。

• true，則元素將在其所在滾動(dòng)區(qū)的可視區(qū)域中居中對(duì)齊。

• false，則元素將與其所在滾動(dòng)區(qū)的可視區(qū)域最近的邊緣對(duì)齊。  根據(jù)可見(jiàn)區(qū)域最靠近元素的哪個(gè)邊緣，元素的頂部將與可見(jiàn)區(qū)域的頂部邊緣對(duì)準(zhǔn)，或者元素的底部邊緣將與可見(jiàn)區(qū)域的底部邊緣對(duì)準(zhǔn)。

window.addEventListener('resize', function() {   if (     document.activeElement.tagName === 'INPUT' ||     document.activeElement.tagName === 'TEXTAREA'   ) {     window.setTimeout(function() {       if ('scrollIntoView' in document.activeElement) {         document.activeElement.scrollIntoView(false)       } else {         document.activeElement.scrollIntoViewIfNeeded(false)       }     }, 0)   } })

onkeyUp 和 onKeydown 兼容性問(wèn)題

IOS 中 input 鍵盤(pán)事件 keyup、keydown、等支持不是很好, 用 input 監(jiān)聽(tīng)鍵盤(pán) keyup  事件，在安卓手機(jī)瀏覽器中沒(méi)有問(wèn)題，但是在 ios 手機(jī)瀏覽器中用輸入法輸入之后，并未立刻相應(yīng) keyup 事件

IOS12 輸入框難以點(diǎn)擊獲取焦點(diǎn)，彈不出軟鍵盤(pán)

定位找到問(wèn)題是 fastclick.js 對(duì) IOS12 的兼容性，可在 fastclick.js 源碼或者 main.js 做以下修改

FastClick.prototype.focus = function(targetElement) {   var length   if (     deviceIsIOS &&     targetElement.setSelectionRange &&     targetElement.type.indexOf('date') !== 0 &&     targetElement.type !== 'time' &&     targetElement.type !== 'month'   ) {     length = targetElement.value.length     targetElement.setSelectionRange(length, length)     targetElement.focus()   } else {     targetElement.focus()   } }

IOS 鍵盤(pán)收起時(shí)頁(yè)面沒(méi)用回落，底部會(huì)留白

通過(guò)監(jiān)聽(tīng)鍵盤(pán)回落時(shí)間滾動(dòng)到原來(lái)的位置

window.addEventListener('focusout', function() {   window.scrollTo(0, 0) })  //input輸入框彈起軟鍵盤(pán)的解決方案。 var bfscrolltop = document.body.scrollTop $('input')   .focus(function() {     document.body.scrollTop = document.body.scrollHeight     //console.log(document.body.scrollTop);   })   .blur(function() {     document.body.scrollTop = bfscrolltop     //console.log(document.body.scrollTop);   })

IOS 下 fixed 失效的原因

軟鍵盤(pán)喚起后，頁(yè)面的 fixed 元素將失效，變成了 absolute，所以當(dāng)頁(yè)面超過(guò)一屏且滾動(dòng)時(shí)，失效的 fixed 元素就會(huì)跟隨滾動(dòng)了。不僅限于  type=text 的輸入框，凡是軟鍵盤(pán)(比如時(shí)間日期選擇、select 選擇等等)被喚起，都會(huì)遇到同樣地問(wèn)題。

解決方法: 不讓頁(yè)面滾動(dòng)，而是讓主體部分自己滾動(dòng),主體部分高度設(shè)為 100%，overflow:scroll

<body>   <div class='warper'>     <div class='main'></div>   <div>   <div class="fix-bottom"></div> </body> 復(fù)制代碼.warper {   position: absolute;   width: 100%;   left: 0;   right: 0;   top: 0;   bottom: 0;   overflow-y: scroll;   -webkit-overflow-scrolling: touch; /* 解決ios滑動(dòng)不流暢問(wèn)題 */ } .fix-bottom {   position: fixed;   bottom: 0;   width: 100%; }

感謝各位的閱讀，以上就是“移動(dòng)端H5開(kāi)發(fā)常用技巧有哪些”的內(nèi)容了，經(jīng)過(guò)本文的學(xué)習(xí)后，相信大家對(duì)移動(dòng)端H5開(kāi)發(fā)常用技巧有哪些這一問(wèn)題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是億速云，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！