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.有時因為伺服器或者別的原因導致頁面上的圖片沒有找到？

這是我們想需要用一個本地的圖片代替沒有找的的圖片

<script type="text/javascript"> 
function nofind(){ 
var img=event.srcElement; 
img.src="images/logoError.png"; 
img.onerror=null; 控制不要一直跳動 
} 
</script> 
<img src="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" : "xxxxxxxxx@xxx.com"
};
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：1
console.log(Object.getOwnPropertyNames(obj).length);    //output：2
console.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: true
console.log(obj.hasOwnProperty("prop2")); //output: true
console.log(obj.propertyIsEnumerable("prop1")); //output: true
console.log(obj.propertyIsEnumerable("prop2")); //output: false
console.log('prop1' in obj);    //output: true
console.log('prop2' in obj);    //output: true
for (var item in obj) {
    console.log(item);
}
//output：prop1
for (var item in Object.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 的屬性值要用正則表示式。

例項 簡單的數字驗證

數字的驗證有兩個：

<input type="number" pattern="d">
<input type="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使用相容模式 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- 針對手持裝置優化，主要是針對一些老的不識別viewport的瀏覽器，比如黑莓 -->
<meta >
<!-- 微軟的老式瀏覽器 -->
<meta >
<!-- uc強制豎屏 -->
<meta >
<!-- QQ強制豎屏 -->
<meta >
<!-- UC強制全屏 -->
<meta >
<!-- QQ強制全屏 -->
<meta >
<!-- UC應用模式 -->
<meta >
<!-- QQ應用模式 -->
<meta >
<!-- windows phone 點選無高光 -->
<meta >

18.移動端如何定義字型 font-family？

@ ————————————– 中文字型的英文名稱 @ 宋體 SimSun @ 黑體 SimHei @ 微信雅黑 Microsoft Yahei @ 微軟正黑體 Microsoft JhengHei @ 新宋體 NSimSun @ 新細明體 MingLiU @ 細明體 MingLiU @ 標楷體 DFKai-SB @ 仿宋 FangSong @ 楷體 KaiTi @ 仿宋GB2312 FangSongGB2312 @ 楷體GB2312 KaiTiGB2312 @ @ 說明：中文字型多數使用宋體、雅黑，英文用 Helvetica

body {font-family: Microsoft Yahei,SimSun,Helvetica;}

19.打電話發簡訊寫郵件怎麼實現？

// 一、打電話
<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>

20.移動端 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

21.點選元素產生背景或邊框怎麼去掉

//ios使用者點選一個連結，會出現一個半透明灰色遮罩, 如果想要禁用，可設定-webkit-tap-highlight-color的alpha值為0去除灰色半透明遮罩；
//android使用者點選一個連結，會出現一個邊框或者半透明灰色遮罩, 不同生產商定義出來額效果不一樣，可設定-webkit-tap-highlight-color的alpha值為0去除部分機器自帶的效果；
//winphone系統,點選標籤產生的灰色半透明背景，能通過設定<meta >去掉；
//特殊說明：有些機型去除不了，如小米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 >

22.美化表單元素

// 一、使用 appearance 改變 webkit 瀏覽器的預設外觀
input,select {-webkit-appearance:none; appearance: none;}
// 二、winphone 下，使用偽元素改變表單元素預設外觀
//1.禁用 select 預設箭頭，::-ms-expand 修改表單控制元件下拉箭頭，設定隱藏並使用背景圖片來修飾
select::-ms-expand {display:none;}
//2.禁用 radio 和 checkbox 預設樣式，::-ms-check 修改表單複選框或單選框預設圖示，設定隱藏並使用背景圖片來修飾
input[type=radio]::-ms-check,
input[type=checkbox]::-ms-check { display:none; }
//3.禁用 pc 端表單輸入框預設清除按鈕，::-ms-clear 修改清除按鈕，設定隱藏並使用背景圖片來修飾
input[type=text]::-ms-clear,
input[type=tel]::-ms-clear,
input[type=number]::-ms-clear { display:none; }

23.移動端字型單位 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;}

24.input 標籤新增上 disable 屬性在 ios 端字型顏色不相容的問題？

input[disabled],input:disabled,input.disabled{
    color: #3e3e3e;  
    -webkit-text-fill-color: #3e3e3e;  
    -webkit-opacity:1;  
    opacity: 1;  
}

25.IOS 的游標大小問題

IE：不管該行有沒有文字，游標高度與 font-size 一致。

FF：該行有文字時，游標高度與 font-size 一致。該行無文字時，游標高度與 input 的 height 一致。

Chrome：該行無文字時，游標高度與 line-height 一致；該行有文字時，游標高度從 input 頂部到文字底部 (這兩種情況都是在有設定 line-height 的時候)，如果沒有 line-height，則是與 font-size 一致。

IOS 中情況和 Chrome 相似。

設定字型大小和行高一致，然後通過 padding 撐開大小，只給 IE 瀏覽器設定 line-height：-ms-line-height:40px;