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) 到達臨界值的時候在阻止事件預設行為
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
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.有時因為伺服器或者別的原因導致頁面上的圖片沒有找到？
這是我們想需要用一個本地的圖片代替沒有找的的圖片
|
1 2 3 4 5 6 7 8 9 |
<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都非常複雜，要改很多。。。
讓他彈出時讓滾動條在最低部
|
1 2 3 4 5 6 7 8 9 10 |
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方法返回的是一個陣列，陣列裡面裝的是物件的屬性。
|
1 2 3 4 5 6 7 8 9 10 |
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。
|
1 2 3 4 5 6 7 |
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"] |
綜合例項：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
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掉：
|
1 2 3 4 5 6 |
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基礎知識：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
<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"> |
18.移動端如何定義字型font-family？
@ ————————————–中文字型的英文名稱
@ 宋體 SimSun
@ 黑體 SimHei
@ 微信雅黑 Microsoft Yahei
@ 微軟正黑體 Microsoft JhengHei
@ 新宋體 NSimSun
@ 新細明體 MingLiU
@ 細明體 MingLiU
@ 標楷體 DFKai-SB
@ 仿宋 FangSong
@ 楷體 KaiTi
@ 仿宋_GB2312 FangSong_GB2312
@ 楷體_GB2312 KaiTi_GB2312
@
@ 說明：中文字型多數使用宋體、雅黑，英文用Helvetica
body { font-family: Microsoft Yahei,SimSun,Helvetica; }
19.打電話發簡訊寫郵件怎麼實現？
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
// 一、打電話 <a href="tel:0755-10086">打電話給:0755-10086</a> // 二、發簡訊，winphone系統無效 <a href="sms:10086">發簡訊給: 10086</a> // 三、寫郵件 <a href="mailto:863139978@qq.com">點選我發郵件</a> //2.收件地址後新增?cc=開頭，可新增抄送地址（Android存在相容問題） <a href="mailto:863139978@qq.com?cc=zhangqian0406@yeah.net">點選我發郵件</a> //3.跟著抄送地址後，寫上&bcc=,可新增密件抄送地址（Android存在相容問題） <a href="mailto:863139978@qq.com?cc=zhangqian0406@yeah.net&bcc=384900096@qq.com">點選我發郵件</a> //4.包含多個收件人、抄送、密件抄送人，用分號(;)隔開多個郵件人的地址 <a href="mailto:863139978@qq.com;384900096@qq.com">點選我發郵件</a> //5.包含主題，用?subject= <a href="mailto:863139978@qq.com?subject=郵件主題">點選我發郵件</a> //6.包含內容，用?body=;如內容包含文字，使用%0A給文字換行 <a href="mailto:863139978@qq.com?body=郵件主題內容%0A騰訊誠信%0A期待您的到來">點選我發郵件</a> //7.內容包含連結，含http(s)://等的文字自動轉化為連結 <a href="mailto:863139978@qq.com?body=http://www.baidu.com">點選我發郵件</a> //8.內容包含圖片（PC不支援） <a href="mailto:863139978@qq.com?body=<img src='images/1.jpg' />">點選我發郵件</a> //9.完整示例 <a href="mailto:863139978@qq.com;384900096@qq.com?cc=zhangqian0406@yeah.net&bcc=993233461@qq.com&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.點選元素產生背景或邊框怎麼去掉
|
1 2 3 4 5 6 7 8 9 10 11 12 |
//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"> |
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{
|
1 2 3 4 |
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;