移動端H5開發(fā)常用技巧有哪些

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

成都創(chuàng)新互聯(lián)是專業(yè)的網(wǎng)站建設(shè)公司,提供網(wǎng)站建設(shè),網(wǎng)站制作,網(wǎng)站設(shè)計等網(wǎng)站開發(fā)一體化解決方案;包括H5網(wǎng)站設(shè)計,小程序設(shè)計,網(wǎng)站定制,企業(yè)網(wǎng)站建設(shè),購物商城網(wǎng)站建設(shè),成都響應(yīng)式網(wǎng)站建設(shè)公司,建網(wǎng)站,PHP網(wǎng)站建設(shè),軟件開發(fā)，軟文發(fā)布平臺，網(wǎng)站營銷。歡迎做網(wǎng)站的企業(yè)前來合作洽談,成都創(chuàng)新互聯(lián)將竭誠為您服務(wù)!

html 篇

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

meta對于移動端的一些特殊屬性，可根據(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)用模式后，頁面講默認(rèn)全屏，禁止長按菜單，禁止收拾，標(biāo)準(zhǔn)排版，以及強制圖片顯示。 <meta name="x5-orientation" content="portrait">     //QQ強制豎屏 <meta name="x5-fullscreen" content="true">          //QQ強制全屏 <meta name="x5-page-mode" content="app">            //QQ應(yīng)用模式

電話號碼識別

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

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

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

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

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

關(guān)閉識別

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

開啟識別

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

郵箱識別(Android)

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

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

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

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

css 篇

0.5px細(xì)線

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

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

屏蔽用戶選擇

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

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è)置字號放大或者縮小導(dǎo)致頁面布局錯誤

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

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

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

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

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

iOS 滑動不流暢

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

解決方案

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

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

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

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

js 篇

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

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

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

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

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

1. ontouchstart

2. ontouchmove

3. ontouchend

4. onclick

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

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

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

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

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

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

解決方案

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

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

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

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

軟鍵盤問題

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

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

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

• false，則元素將與其所在滾動區(qū)的可視區(qū)域最近的邊緣對齊。  根據(jù)可見區(qū)域最靠近元素的哪個邊緣，元素的頂部將與可見區(qū)域的頂部邊緣對準(zhǔn)，或者元素的底部邊緣將與可見區(qū)域的底部邊緣對準(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 兼容性問題

IOS 中 input 鍵盤事件 keyup、keydown、等支持不是很好, 用 input 監(jiān)聽鍵盤 keyup  事件，在安卓手機瀏覽器中沒有問題，但是在 ios 手機瀏覽器中用輸入法輸入之后，并未立刻相應(yīng) 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 鍵盤收起時頁面沒用回落，底部會留白

通過監(jiān)聽鍵盤回落時間滾動到原來的位置

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

解決方法: 不讓頁面滾動，而是讓主體部分自己滾動,主體部分高度設(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滑動不流暢問題 */ } .fix-bottom {   position: fixed;   bottom: 0;   width: 100%; }

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

新聞標(biāo)題：移動端H5開發(fā)常用技巧有哪些
文章出自：http://muchs.cn/article30/ghodso.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供全網(wǎng)營銷推廣、靜態(tài)網(wǎng)站、App設(shè)計、微信公眾號、ChatGPT、標(biāo)簽優(yōu)化

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)