html 篇
常用的meta屬性設(shè)置
meta對于移動端的一些特殊屬性苍凛，可根據(jù)需要自行設(shè)置
//Android?禁止屏幕旋轉(zhuǎn)
//全屏顯示
//UC應(yīng)用模式，使用了application這種應(yīng)用模式后，頁面講默認全屏，禁止長按菜單控硼，禁止收拾，標(biāo)準(zhǔn)排版夺蛇，以及強制圖片顯示。
//QQ強制豎屏
//QQ強制全屏
//QQ應(yīng)用模式
電話號碼識別
在 iOS Safari （其他瀏覽器和 Android 均不會）上會對那些看起來像是電話號碼的數(shù)字處理為電話鏈接酣胀，比如：
7 位數(shù)字刁赦，形如：1234567
帶括號及加號的數(shù)字愿卸，形如：(+86)123456789
雙連接線的數(shù)字，形如：00-00-00111
11 位數(shù)字截型，形如：13800138000
關(guān)閉識別
開啟識別
123456
郵箱識別（Android）
安卓上會對符合郵箱格式的字符串進行識別趴荸，我們可以通過如下的 meta 來管別郵箱的自動識別：
同樣地，我們也可以通過標(biāo)簽屬性來開啟長按郵箱地址彈出郵件發(fā)送的功能：
dooyoe@gmail.com
css 篇
0.5px細線
移動端 H5 項目越來越多宦焦，設(shè)計師對于 UI 的要求也越來越高发钝，比如 1px 的邊框。在高清屏下波闹，移動端的 1px 會很粗酝豪。
那么為什么會產(chǎn)生這個問題呢？主要是跟一個東西有關(guān)精堕，DPR(devicePixelRatio) 設(shè)備像素比孵淘，它是默認縮放為 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:00;
transform-origin:00;
}
/*?上邊框?*/
.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:00;
transform-origin:00;
}
/*?右邊框?*/
.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:00;
transform-origin:00;
}
/*?左邊框?*/
.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:00;
transform-origin:00;
}
/*?四條邊?*/
.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:1pxsolid#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 上洞斯，輸入框默認有內(nèi)部陰影,以這樣關(guān)閉：
div{
-webkit-appearance:?none;
}
如何禁止保存或拷貝圖像
代碼如下
img{
-webkit-touch-callout:?none;
}
輸入框默認字體顏色
設(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刀闷，默認值為 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)順序
ontouchstart
ontouchmove
ontouchend
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
//?阻止默認事件
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'indocument.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){
varlength
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輸入框彈起軟鍵盤的解決方案。
varbfscrolltop?=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
.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%;
}
