移動端H5開發常用技巧有哪些

這篇文章主要講解了“移動端H5開發常用技巧有哪些”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“移動端H5開發常用技巧有哪些”吧！

html 篇

常用的meta屬性設置

meta對于移動端的一些特殊屬性，可根據需要自行設置

<meta name="screen-orientation" content="portrait"> //Android 禁止屏幕旋轉 <meta name="full-screen" content="yes">             //全屏顯示 <meta name="browsermode" content="application">     //UC應用模式，使用了application這種應用模式后，頁面講默認全屏，禁止長按菜單，禁止收拾，標準排版，以及強制圖片顯示。 <meta name="x5-orientation" content="portrait">     //QQ強制豎屏 <meta name="x5-fullscreen" content="true">          //QQ強制全屏 <meta name="x5-page-mode" content="app">            //QQ應用模式

電話號碼識別

在 iOS Safari (其他瀏覽器和 Android 均不會)上會對那些看起來像是電話號碼的數字處理為電話鏈接，比如：

• 7 位數字，形如：1234567

• 帶括號及加號的數字，形如：(+86)123456789

• 雙連接線的數字，形如：00-00-00111

• 11 位數字，形如：13800138000

關閉識別

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

開啟識別

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

郵箱識別(Android)

安卓上會對符合郵箱格式的字符串進行識別，我們可以通過如下的 meta 來管別郵箱的自動識別：

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

同樣地，我們也可以通過標簽屬性來開啟長按郵箱地址彈出郵件發送的功能：

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

css 篇

0.5px細線

移動端 H5 項目越來越多，設計師對于 UI 的要求也越來越高，比如 1px 的邊框。在高清屏下，移動端的 1px 會很粗。

那么為什么會產生這個問題呢?主要是跟一個東西有關，DPR(devicePixelRatio) 設備像素比，它是默認縮放為 100%的情況下，設備像素和  CSS 像素的比值。目前主流的屏幕 DPR=2(iPhone 8),或者 3(iPhone 8 Plus)。拿 2 倍屏來說，設備的物理像素要實現 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;   } }

屏蔽用戶選擇

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

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

清除輸入框內陰影

在 iOS 上，輸入框默認有內部陰影,以這樣關閉：

div {   -webkit-appearance: none; }

如何禁止保存或拷貝圖像

代碼如下

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

輸入框默認字體顏色

設置 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; }

用戶設置字號放大或者縮小導致頁面布局錯誤

設置字體禁止縮放

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

android系統中元素被點擊時產生邊框

部分android系統點擊一個鏈接，會出現一個邊框或者半透明灰色遮罩, 不同生產商定義出來額效果不一樣。去除代碼如下

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

iOS 滑動不流暢

ios 手機上下滑動頁面會產生卡頓，手指離開頁面，頁面立即停止運動。整體表現就是滑動不流暢，沒有滑動慣性。 iOS 5.0  以及之后的版本，滑動有定義有兩個值 auto 和 touch，默認值為 auto。

解決方案

• 在滾動容器上增加滾動 touch 方法

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

• 設置 overflow 設置外部 overflow 為 hidden,設置內容元素 overflow 為 auto。內部元素超出 body  即產生滾動，超出的部分 body 隱藏。

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

js 篇

移動端click屏幕產生200-300 ms的延遲響應

移動設備上的web網頁是有300ms延遲的，往往會造成按鈕點擊延遲甚至是點擊失效。解決方案：

fastclick可以解決在手機上點擊事件的300ms延遲

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

觸摸事件的響應順序

1. ontouchstart

2. ontouchmove

3. ontouchend

4. onclick

audio 和 video 在 ios 和 andriod 中自動播放

這個不是bug，由于自動播放網頁中的音頻或視頻，會給用戶帶來一些困擾或者不必要的流量消耗，所以蘋果系統和安卓系統通常都會禁止自動播放和使用 JS  的觸發播放，必須由用戶來觸發才可以播放。加入自動觸發播放的代碼

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

iOS 上拉邊界下拉出現空白

手指按住屏幕下拉，屏幕頂部會多出一塊白色區域。手指按住屏幕上拉，底部多出一塊白色區域。

在 iOS 中，手指按住屏幕上下拖動，會觸發 touchmove 事件。這個事件觸發的對象是整個 webview  容器，容器自然會被拖動，剩下的部分會成空白。

解決方案

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

ios 日期轉換 NAN 的問題

將日期字符串的格式符號替換成'/'

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

軟鍵盤問題

IOS 鍵盤彈起擋住原來的視圖

• 可以通過監聽移動端軟鍵盤彈起  Element.scrollIntoViewIfNeeded(Boolean)方法用來將不在瀏覽器窗口的可見區域內的元素滾動到瀏覽器窗口的可見區域。  如果該元素已經在瀏覽器窗口的可見區域內，則不會發生滾動。

• true，則元素將在其所在滾動區的可視區域中居中對齊。

• false，則元素將與其所在滾動區的可視區域最近的邊緣對齊。  根據可見區域最靠近元素的哪個邊緣，元素的頂部將與可見區域的頂部邊緣對準，或者元素的底部邊緣將與可見區域的底部邊緣對準。

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 兼容性問題

IOS 中 input 鍵盤事件 keyup、keydown、等支持不是很好, 用 input 監聽鍵盤 keyup  事件，在安卓手機瀏覽器中沒有問題，但是在 ios 手機瀏覽器中用輸入法輸入之后，并未立刻相應 keyup 事件

IOS12 輸入框難以點擊獲取焦點，彈不出軟鍵盤

定位找到問題是 fastclick.js 對 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 鍵盤收起時頁面沒用回落，底部會留白

通過監聽鍵盤回落時間滾動到原來的位置

window.addEventListener('focusout', function() {   window.scrollTo(0, 0) })  //input輸入框彈起軟鍵盤的解決方案。 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 失效的原因

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

解決方法: 不讓頁面滾動，而是讓主體部分自己滾動,主體部分高度設為 100%，overflow:scroll

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

感謝各位的閱讀，以上就是“移動端H5開發常用技巧有哪些”的內容了，經過本文的學習后，相信大家對移動端H5開發常用技巧有哪些這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！