手機端頁面在專案中遇到的一些問題及解決辦法
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 頁面橡皮彈回效果遮擋頁面選項卡？
(1) 有時 body 和 html 的 height: 100% 去除掉問題可能就沒有了。
(2) 到達臨界值的時候在阻止事件預設行為
var startY,endY;//記錄手指觸控的起點座標$('body').on('touchstart',function(e){startY = e.touches[0].pageY;});$('body').on('touchmove',function(e){endY = e.touches[0].pageY;//記錄手指觸控的移動中的座標//手指下滑，頁面到達頂端不能繼續下滑if(endY>startY&& $(window).scrollTop()<=0){e.preventDefault();}//手指上滑，頁面到達底部能繼續上滑if(endY<startY&& $(window).scrollTop()+$(window).height()>=$('body')[0].scrollHeight){e.preventDefault();}})
有時也會碰見彈窗出來後兩個層的橡皮筋效果出現問題，我們可以在彈出彈出時給底層頁面加上一個類名，類名禁止頁面滑動這樣下層的橡皮筋效果就會被禁止，就不會影響彈窗層。
3.IOS 機型 margin 屬性無效問題？
(1) 設定 html body 的高度為百分比時，margin-bottom 在 safari 裡失效
(2) 直接 padding 代替 margin
4.Ios 繫結點選事件不執行？
(1) 新增樣式 cursor ：pointer。點選後消除背景閃一下的 css：-webkit-tap-highlight-color:transparent;
5.Ios 鍵盤換行變為搜尋？
首先，input 要放在 form 裡面。
這時 "換行" 已經變成 “前往”。
如果想變成 “搜尋”，input 設定 type="search"。
6.Jq 對 a 標籤點選事件不生效？
出現這種情況的原因不明，有的朋友解釋：我們平時都是點選的 A 標籤中的文字了。 所以要想用 JS 模擬點選 A 標籤事件，就得先往 A 標籤中的文字新增能被 JS 捕獲的元素，然後再用 JS 模擬點選該元素即可。但是我覺得不合理，雖然找不到原因但是解決辦法還是有的。
(1)document.getElementById("abc").click();
(2)$("#abc")[0].click();
7.有時因為伺服器或者別的原因導致頁面上的圖片沒有找到？
這是我們想需要用一個本地的圖片代替沒有找的的圖片
<scripttype="text/javascript">function nofind(){var img=event.srcElement;img.src="images/logoError.png";img.onerror=null;控制不要一直跳動}</script><imgsrc="images/logo.png"onerror="nofind();"/>
8.transform 屬性影響 position:fixed？
(1) 規範中有規定：如果元素的 transform 值不為 none，則該元素會生成包含塊和層疊上下文。CSS Transforms Module Level 1 不只在手機上，電腦上也一樣。除了 fixed 元素會受影響之外，z-index（層疊上下文）值也會受影響。絕對定位元素等和包含塊有關的屬性都會受到影響。當然如果 transform 元素的 display 值為 inline 時又會有所不同。最簡單的解決方法就是 transform 元素內部不能有 absolute、fixed 元素.
9.ios 對 position: fixed 不太友好，有時我們需要加點處理？
在安卓上面，點選頁面底部的輸入框，軟鍵盤彈出，頁面移動上移。 而 ios 上面，點選頁面底部輸入框，軟鍵盤彈出，輸入框看不到了。。。查資料說什麼的都有，iscroll,jquery-moblie，absolute，fixe，static 都非常複雜，要改很多。。。 讓他彈出時讓滾動條在最低部
var u = navigator.userAgent, app = navigator.appVersion;var isiOS =!!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);//ios終端if(isiOS){$('textarea').focus(function(){window.setTimeout('scrollBottom()',500);});}function scrollBottom(){window.scrollTo(0, $('body').height());}
10.jq validate 外掛驗證問題？
(1) 所以的 input 必須有 name 不然會出錯
11.有時手機會出現斷網的情況，我沒可能會對斷網的情況做一些處理？
(1)navigator.onLine 可判斷是否是離線狀態.
12.判斷物件的長度？
(1) 用 Object.keys，Object.keys 方法返回的是一個數組，數組裡面裝的是物件的屬性。
var person ={"name":"zhangshan","sex":"man","age":"50","height":"180","phone":"1xxxxxxxxxx","email":"[email protected]"};var arr =Object.keys(person);console.log(arr.length);
(2)Object.getOwnPropertyNames(obj).length
13.上一題我們用到了 Object.keys 與 Object.getOwnPropertyNames 他們的區別？
Object.keys 定義：返回一個物件可列舉屬性的字串陣列；
Object.getOwnPropertyNames 定義：返回一個物件可列舉、不可列舉屬性的名稱； 屬性的可列舉性、不可列舉性：定義：可列舉屬性是指那些內部 “可列舉” 標誌設定為 true 的屬性，對於通過直接的賦值和屬性初始化的屬性，該標識值預設為即為 true，對於通過 Object.defineProperty 等定義的屬性，該標識值預設為 false。
var obj ={"prop1":"v1"};Object.defineProperty(obj,"prop2",{ value:"v2", enumerable:false});console.log(Object.keys(obj).length);//output：1console.log(Object.getOwnPropertyNames(obj).length);//output：2console.log(Object.keys(obj));//output：Array[1] => [0: "prop1"]console.log(Object.getOwnPropertyNames(obj));//output：Array[2] => [0: "prop1", 1: "prop2"]
綜合例項：
var obj ={"prop1":"v1"};Object.defineProperty(obj,"prop2",{ value:"v2", enumerable:false});console.log(obj.hasOwnProperty("prop1"));//output: trueconsole.log(obj.hasOwnProperty("prop2"));//output: trueconsole.log(obj.propertyIsEnumerable("prop1"));//output: trueconsole.log(obj.propertyIsEnumerable("prop2"));//output: falseconsole.log('prop1'in obj);//output: trueconsole.log('prop2'in obj);//output: truefor(var item in obj){console.log(item);}//output：prop1for(var item inObject.getOwnPropertyNames(obj)){console.log(Object.getOwnPropertyNames(obj)[item]);}//ouput:[prop1,prop2]
14.移動開發不同手機彈出數字鍵盤問題？
(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;}
(3)pattern 屬性
pattern 用於驗證表單輸入的內容，通常 HTML5 的 type 屬性，比如 email、tel、number、data 類、url 等，已經自帶了簡單的資料格式驗證功能了，加上 pattern 後，前端部分的驗證更加簡單高效了。
顯而易見，pattern 的屬性值要用正則表示式。
例項 簡單的數字驗證
數字的驗證有兩個：
<inputtype="number"pattern="d"><inputtype="number"pattern="[0-9]*">
15.input[number] 型別輸入非數字字元
js 獲取的值是空；比如 - 12，+123 等
16.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();
17.Meta 基礎知識：
<meta/>// width 設定viewport寬度，為一個正整數，或字串‘device-width’// height 設定viewport高度，一般設定了寬度，會自動解析出高度，可以不用設定// initial-scale 預設縮放比例，為一個數字，可以帶小數// minimum-scale 允許使用者最小縮放比例，為一個數字，可以帶小數// maximum-scale 允許使用者最大縮放比例，為一個數字，可以帶小數// user-scalable 是否允許手動縮放空白頁基本meta標籤<!-- 設定縮放 --><meta/><!-- 可隱藏位址列，僅針對IOS的Safari（注：IOS7.0版本以後，safari上已看不到效果） --><meta/><!-- 僅針對IOS的Safari頂端狀態條的樣式（可選default/black/black-translucent ） --><meta/><!-- IOS中禁用將數字識別為電話號碼/忽略Android平臺中對郵箱地址的識別 --><meta/>其他meta標籤<!-- 啟用360瀏覽器的極速模式(webkit) --><meta><!-- 避免IE使用相容模式 --><metahttp-equiv="X-UA-Compatible"content="IE=edge"><!-- 針對手持裝置優化，主要是針對一些老的不識別viewport的瀏覽器，比如黑莓 -->