總結移動端H5開發經常使用技巧（乾貨滿滿哦！）
前言
年後第一天到公司上班，整理一些在移動端H5開發常見的問題給你們作下分享，這裏不少是本身在開發過程當中遇到的大坑或者遭到過吐糟的問題，但願能給你們帶來或多或少的幫助，喜歡的大佬們能夠給個小贊，若是有問題也能夠一塊兒討論下。javascript
下面是最近一個月整理的JS基礎總結，可供你們溫故而知新。css
本人github: github.com/Michael-lzghtml
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 均不會）上會對那些看起來像是電話號碼的數字處理爲電話連接，好比：vue
- 7 位數字，形如：1234567
- 帶括號及加號的數字，形如：(+86)123456789
- 雙鏈接線的數字，形如：00-00-00111
- 11 位數字，形如：13800138000
關閉識別java
<meta name="format-detection" content="telephone=no" />
複製代碼
開啓識別android
<a href="tel:123456">123456</a>
複製代碼
郵箱識別（Android）
安卓上會對符合郵箱格式的字符串進行識別，咱們能夠經過以下的 meta 來管別郵箱的自動識別：webpack
<meta content="email=no" name="format-detection" />
複製代碼
一樣地，咱們也能夠經過標籤屬性來開啓長按郵箱地址彈出郵件發送的功能：ios
<a mailto:dooyoe@gmail.com">dooyoe@gmail.com</a>
複製代碼
css 篇
0.5px細線
移動端 H5 項目愈來愈多，設計師對於 UI 的要求也愈來愈高，好比 1px 的邊框。在高清屏下，移動端的 1px 會很粗。git
那麼爲何會產生這個問題呢？主要是跟一個東西有關，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的延遲問題
觸摸事件的響應順序
- ontouchstart
- ontouchmove
- ontouchend
- 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%;
}
複製代碼
推薦文章
關注的個人公衆號不按期分享前端知識，與您一塊兒進步！
- 1. 總結移動端H5開發經常使用技巧（乾貨滿滿哦！）
- 2. kindle使用心得.滿滿乾貨
- 3. 2019 前端年終總結（乾貨滿滿）
- 4. 前端開發面試題（滿滿乾貨）
- 5. 3.9-陀螺財經VALUE100活動圓滿結束！大咖分享~乾貨滿滿！
- 6. Github入門（乾貨滿滿）
- 7. Qt教程，乾貨滿滿
- 8. 移動端H5開發技巧
- 9. H5移動前端開發經常使用高能css3彙總
- 10. 移動端開發乾貨
- 更多相關文章...
- • Markdown 高級技巧 - Markdown 教程
- • Spring使用AspectJ開發AOP：基於XML和基於Annotation - Spring教程
- • PHP開發工具
- • 算法總結-滑動窗口
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. 總結移動端H5開發經常使用技巧（乾貨滿滿哦！）
- 2. kindle使用心得.滿滿乾貨
- 3. 2019 前端年終總結（乾貨滿滿）
- 4. 前端開發面試題（滿滿乾貨）
- 5. 3.9-陀螺財經VALUE100活動圓滿結束！大咖分享~乾貨滿滿！
- 6. Github入門（乾貨滿滿）
- 7. Qt教程，乾貨滿滿
- 8. 移動端H5開發技巧
- 9. H5移動前端開發經常使用高能css3彙總
- 10. 移動端開發乾貨