webapp h5專案中踩過的坑及解決辦法
1.解決頁面使用overflow: scroll在iOS上滑動卡頓的問題?
首先你可能會給頁面的html和body增加了height: 100%, 然後就可能造成IOS上頁面滑動的卡頓問題。解決方案是：
(1) 看是否能把body和html的height: 100%去除掉。
(2) 在滾動的容器中增加：-webkit-overflow-scrolling: touch或者給body增加：body {overflow-x: hidden}。
2.IOS機型margin屬性無效問題？
(1) 設定html body的高度為百分比時，margin-bottom在safari裡失效
(2) 直接padding代替margin
3.Ios鍵盤換行變為搜尋？
首先，input 要放在 form裡面。
這時 "換行" 已經變成 “前往”。
如果想變成 “搜尋”，input 設定 type="search"。
4.有時因為伺服器或者別的原因導致頁面上的圖片沒有找到？
這是我們想需要用一個本地的圖片代替沒有找的的圖片
<script type="text/javascript">
function nofind(){
var img=event.srcElement;
img.src="images/error.png"
img.onerror=null; 禁止一直跳動
}
</script>
<img src="images/logo.png" onerror="nofind();" />
5.transform屬性影響position:fixed？
(1)規範中有規定：如果元素的transform值不為none，則該元素會生成包含塊和層疊上下文。CSS Transforms Module Level 1不只在手機上，電腦上也一樣。除了fixed元素會受影響之外，z-index（層疊上下文）值也會受影響。絕對定位元素等和包含塊有關的屬性都會受到影響。當然如果transform元素的display值為inline時又會有所不同。最簡單的解決方法就是transform元素內部不能有absolute、fixed元素.
6.有時手機會出現斷網的情況，我沒可能會對斷網的情況做一些處理？
navigator.onLine可判斷是否是離線狀態.
7.判斷物件的長度？
(1)用Object.keys，Object.keys方法返回的是一個數組，數組裡面裝的是物件的屬性。
var person = {
"name" : "jobin",
"sex" : "man",
"age" : "23",
"height" : "180",
"phone" : "1812595xxxx",
"email" : "[email protected]"
};
var arr = Object.keys(person);
console.log(arr.length);8.移動開發不同手機彈出數字鍵盤問題？
(1)type="tel"
iOS和Android的鍵盤表現都差不多
(2)type="number"
優點是Android下實現的一個真正的數字鍵盤
缺點一：iOS下不是九宮格鍵盤，輸入不方便
缺點二：舊版Android（包括微信所用的X5核心）在輸入框後面會有超級雞肋的小尾巴，好在Android 4.4.4以後給去掉了。
不過對於缺點二，我們可以用webkit私有的偽元素給fix掉：
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
appearance: none;
margin: 0;
}
9.Javascript：history.go()和history.back()的用法與區別？
簡單的說就是：go(-1):返回上一頁，原頁面表單中的內容會丟失；back():返回上一頁，原頁表表單中的內容會保留。history.go(-1):後退+重新整理history.back():後退
之所以注意到這個區別，是因為不同的瀏覽器後退行為也是有區別的，而區別就跟javascript：history.go()和history.back()的區別類似。
Chrome和ff瀏覽器後退頁面，會重新整理後退的頁面，若有資料請求也會提交資料申請。類似於history.go(-1);
而safari（包括桌面版和ipad版）的後退按鈕則不會重新整理頁面，也不會提交資料申請。類似於javascript：history.back();
10.Meta基礎知識：
<meta name="viewport"content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
// width 設定viewport寬度，為一個正整數，或字串‘device-width’
// height 設定viewport高度，一般設定了寬度，會自動解析出高度，可以不用設定
// initial-scale 預設縮放比例，為一個數字，可以帶小數
// minimum-scale 允許使用者最小縮放比例，為一個數字，可以帶小數
// maximum-scale 允許使用者最大縮放比例，為一個數字，可以帶小數
// user-scalable 是否允許手動縮放
空白頁基本meta標籤
<!-- 設定縮放 -->
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui" />
<!-- 可隱藏位址列，僅針對IOS的Safari（注：IOS7.0版本以後，safari上已看不到效果） -->
<meta name="apple-mobile-web-app-capable" content="yes" />
<!-- 僅針對IOS的Safari頂端狀態條的樣式（可選default/black/black-translucent ） -->
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<!-- IOS中禁用將數字識別為電話號碼/忽略Android平臺中對郵箱地址的識別 -->
<meta name="format-detection"content="telephone=no, email=no" />
其他meta標籤
<!-- 啟用360瀏覽器的極速模式(webkit) -->
<meta name="renderer" content="webkit">
<!-- 避免IE使用相容模式 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- 針對手持裝置優化，主要是針對一些老的不識別viewport的瀏覽器，比如黑莓 -->
<meta name="HandheldFriendly" content="true">
<!-- 微軟的老式瀏覽器 -->
<meta name="MobileOptimized" content="320">
<!-- uc強制豎屏 -->
<meta name="screen-orientation" content="portrait">
<!-- QQ強制豎屏 -->
<meta name="x5-orientation" content="portrait">
<!-- UC強制全屏 -->
<meta name="full-screen" content="yes">
<!-- QQ強制全屏 -->
<meta name="x5-fullscreen" content="true">
<!-- UC應用模式 -->
<meta name="browsermode" content="application">
<!-- QQ應用模式 -->
<meta name="x5-page-mode" content="app">
<!-- windows phone 點選無高光 -->
<meta name="msapplication-tap-highlight" content="no">11.打電話發簡訊寫郵件怎麼實現？
// 一、打電話
<a href="tel:0755-10086">打電話給:0755-10086</a>
// 二、發簡訊，winphone系統無效
<a href="sms:10086">發簡訊給: 10086</a>
// 三、寫郵件
<a href="mailto:[email protected]">點選我發郵件</a>
//2.收件地址後新增?cc=開頭，可新增抄送地址（Android存在相容問題）
<a href="mailto:[email protected][email protected]">點選我發郵件</a>
//3.跟著抄送地址後，寫上&bcc=,可新增密件抄送地址（Android存在相容問題）
<a href="mailto:[email protected][email protected]&[email protected]">點選我發郵件</a>
//4.包含多個收件人、抄送、密件抄送人，用分號(;)隔開多個郵件人的地址
<a href="mailto:[email protected];[email protected]">點選我發郵件</a>
//5.包含主題，用?subject=
<a href="mailto:[email protected]?subject=郵件主題">點選我發郵件</a>
//6.包含內容，用?body=;如內容包含文字，使用%0A給文字換行
<a href="mailto:[email protected]?body=郵件主題內容%0A騰訊誠信%0A期待您的到來">點選我發郵件</a>
//7.內容包含連結，含http(s)://等的文字自動轉化為連結
<a href="mailto:[email protected]?body=http://www.baidu.com">點選我發郵件</a>
//8.內容包含圖片（PC不支援）
<a href="mailto:[email protected]?body=<img src='images/1.jpg' />">點選我發郵件</a>
//9.完整示例
<a href="mailto:[email protected];[email protected][email protected]&[email protected]&subject=[郵件主題]&body=騰訊誠邀您參與%0A%0Ahttp://www.baidu.com%0A%0A<img src='images/1.jpg' />">點選我發郵件</a>12.移動端touch事件（區分webkit和winphone）？
// 以下支援webkit
touchstart——當手指觸碰螢幕時候發生。不管當前有多少隻手指
touchmove——當手指在螢幕上滑動時連續觸發。通常我們再滑屏頁面，會呼叫event的preventDefault()可以阻止預設情況的發生：阻止頁面滾動
touchend——當手指離開螢幕時觸發
touchcancel——系統停止跟蹤觸控時候會觸發。例如在觸控過程中突然頁面alert()一個提示框，此時會觸發該事件，這個事件比較少用
//TouchEvent說明：
touches：螢幕上所有手指的資訊
targetTouches：手指在目標區域的手指資訊
changedTouches：最近一次觸發該事件的手指資訊
touchend時，touches與targetTouches資訊會被刪除，changedTouches儲存的最後一次的資訊，最好用於計算手指資訊
//引數資訊(changedTouches[0])
clientX、clientY在顯示區的座標
target：當前元素
//事件響應順序
ontouchstart > ontouchmove > ontouchend > onclick
13.點選元素產生背景或邊框怎麼去掉
//ios使用者點選一個連結，會出現一個半透明灰色遮罩, 如果想要禁用，可設定-webkit-tap-highlight-color的alpha值為0去除灰色半透明遮罩；
//android使用者點選一個連結，會出現一個邊框或者半透明灰色遮罩, 不同生產商定義出來額效果不一樣，可設定-webkit-tap-highlight-color的alpha值為0去除部分機器自帶的效果；
//winphone系統,點選標籤產生的灰色半透明背景，能通過設定<meta name="msapplication-tap-highlight" content="no">去掉；
//特殊說明：有些機型去除不了，如小米2。對於按鈕類還有個辦法，不使用a或者input標籤，直接用div標籤
a,button,input,textarea {
-webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-user-modify:read-write-plaintext-only; //-webkit-user-modify有個副作用，就是輸入法不再能夠輸入多個字元
}
// 也可以
* { -webkit-tap-highlight-color: rgba(0,0,0,0); }
//winphone下
<meta name="msapplication-tap-highlight" content="no">14.移動端字型單位font-size選擇px還是rem？
// 如需適配多種移動裝置，建議使用rem。以下為參考值：
html { font-size: 62.5%; } //10*16 = 62.5%
//設定12px字型 這裡注意在rem前要加上對應的px值，解決不支援rem的瀏覽器的相容問題，做到優雅降級
body { font-size:12px; font-size:1.2rem; }