2018-7-3 高勁
1.解決頁(yè)面使用overflow: scroll在iOS上滑動(dòng)卡頓的問(wèn)題?
首先你可能會(huì)給頁(yè)面的html和body增加了height: 100%, 然后就可能造成IOS上頁(yè)面滑動(dòng)的卡頓問(wèn)題。解決方案是：
(1) 看是否能把body和html的height: 100%去除掉。
(2) 在滾動(dòng)的容器中增加：-webkit-overflow-scrolling: touch或者給body增加：body {overflow-x: hidden}。
2.ios頁(yè)面橡皮彈回效果遮擋頁(yè)面選項(xiàng)卡？
(1) 有時(shí)body和html的height: 100%去除掉問(wèn)題可能就沒(méi)有了。
(2) 到達(dá)臨界值的時(shí)候在阻止事件默認(rèn)行為
var startY,endY;
//記錄手指觸摸的起點(diǎn)坐標(biāo)
$('body').on('touchstart',function (e) {
startY = e.touches[0].pageY;
});
$('body').on('touchmove',function (e) {
endY = e.touches[0].pageY; //記錄手指觸摸的移動(dòng)中的坐標(biāo)
//手指下滑，頁(yè)面到達(dá)頂端不能繼續(xù)下滑
if(endY>startY&& $(window).scrollTop()<=0){
e.preventDefault();
}
//手指上滑，頁(yè)面到達(dá)底部能繼續(xù)上滑
if(endY<startY&& $(window).scrollTop()+
$(window).height()>=$('body')[0].scrollHeight){
e.preventDefault();
}
})
有時(shí)也會(huì)碰見(jiàn)彈窗出來(lái)后兩個(gè)層的橡皮筋效果出現(xiàn)問(wèn)題，我們可以在彈出彈出時(shí)給底層頁(yè)面加上一個(gè)類(lèi)名，類(lèi)名禁止頁(yè)面滑動(dòng)這樣下層的橡皮筋效果就會(huì)被禁止，就不會(huì)影響彈窗層。 3.IOS機(jī)型margin屬性無(wú)效問(wèn)題？ (1) 設(shè)置html body的高度為百分比時(shí)，margin-bottom在safari里失效 (2) 直接padding代替margin 4.Ios綁定點(diǎn)擊事件不執(zhí)行？ (1)添加樣式cursor ：pointer。點(diǎn)擊后消除背景閃一下的css：-webkit-tap-highlight-color:transparent; 5.Ios鍵盤(pán)換行變?yōu)樗阉鳎?/span> 首先，input 要放在 form里面。 這時(shí) "換行" 已經(jīng)變成 “前往”。 如果想變成 “搜索”，input 設(shè)置 type="search"。 6.Jq對(duì)a標(biāo)簽點(diǎn)擊事件不生效？ 出現(xiàn)這種情況的原因不明，有的朋友解釋?zhuān)何覀兤綍r(shí)都是點(diǎn)擊的A標(biāo)簽中的文字了。 所以要想用JS模擬點(diǎn)擊A標(biāo)簽事件，就得先往A標(biāo)簽中的文字添加能被JS捕獲的元素，然后再用JS模擬點(diǎn)擊該元素即可。但是我覺(jué)得不合理，雖然找不到原因但是解決辦法還是有的。 (1)document.getElementById("abc ").click(); (2)$("#abc ")[0].click(); 7.有時(shí)因?yàn)榉?wù)器或者別的原因?qū)е马?yè)面上的圖片沒(méi)有找到？ 這是我們想需要用一個(gè)本地的圖片代替沒(méi)有找的的圖片
<script type="text/javascript"> function nofind(){ var img=event.srcElement; img.src="images/logoError.png"; img.onerror=null; 控制不要一直跳動(dòng) } </script> <img src="images/logo.png" />8.transform屬性影響position:fixed？
(1)規(guī)范中有規(guī)定：如果元素的transform值不為none，則該元素會(huì)生成包含塊和層疊上下文。CSS Transforms Module Level 1不只在手機(jī)上，電腦上也一樣。除了fixed元素會(huì)受影響之外，z-index（層疊上下文）值也會(huì)受影響。絕對(duì)定位元素等和包含塊有關(guān)的屬性都會(huì)受到影響。當(dāng)然如果transform元素的display值為inline時(shí)又會(huì)有所不同。最簡(jiǎn)單的解決方法就是transform元素內(nèi)部不能有absolute、fixed元素.
9.ios對(duì)position: fixed不太友好，有時(shí)我們需要加點(diǎn)處理？
在安卓上面，點(diǎn)擊頁(yè)面底部的輸入框，軟鍵盤(pán)彈出，頁(yè)面移動(dòng)上移。
而ios上面，點(diǎn)擊頁(yè)面底部輸入框，軟鍵盤(pán)彈出，輸入框看不到了。。。查資料說(shuō)什么的都有，iscroll,jquery-moblie，absolute，fixe，static都非常復(fù)雜，要改很多。。。
讓他彈出時(shí)讓滾動(dòng)條在部
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插件驗(yàn)證問(wèn)題？
(1)所以的input必須有name不然會(huì)出錯(cuò)
11.有時(shí)手機(jī)會(huì)出現(xiàn)斷網(wǎng)的情況，我沒(méi)可能會(huì)對(duì)斷網(wǎng)的情況做一些處理？
(1)navigator.onLine可判斷是否是脫機(jī)狀態(tài).
12.判斷對(duì)象的長(zhǎng)度？
(1)用Object.keys，Object.keys方法返回的是一個(gè)數(shù)組，數(shù)組里面裝的是對(duì)象的屬性
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他們的區(qū)別？
Object.keys定義：返回一個(gè)對(duì)象可枚舉屬性的字符串?dāng)?shù)組；
Object.getOwnPropertyNames定義：返回一個(gè)對(duì)象可枚舉、不可枚舉屬性的名稱(chēng)；
屬性的可枚舉性、不可枚舉性：定義：可枚舉屬性是指那些內(nèi)部 “可枚舉” 標(biāo)志設(shè)置為 true 的屬性，對(duì)于通過(guò)直接的賦值和屬性初始化的屬性，該標(biāo)識(shí)值默認(rèn)為即為 true，對(duì)于通過(guò) Object.defineProperty 等定義的屬性，該標(biāo)識(shí)值默認(rèn)為 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"]
綜合實(shí)例
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.移動(dòng)開(kāi)發(fā)不同手機(jī)彈出數(shù)字鍵盤(pán)問(wèn)題？
(1)type="tel"
iOS和Android的鍵盤(pán)表現(xiàn)都差不多
(2)type="number"
優(yōu)點(diǎn)是Android下實(shí)現(xiàn)的一個(gè)真正的數(shù)字鍵盤(pán)
缺點(diǎn)一：iOS下不是九宮格鍵盤(pán)，輸入不方便
缺點(diǎn)二：舊版Android（包括微信所用的X5內(nèi)核）在輸入框后面會(huì)有超級(jí)雞肋的小尾巴，好在Android 4.4.4以后給去掉了。
不過(guò)對(duì)于缺點(diǎn)二，我們可以用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用于驗(yàn)證表單輸入的內(nèi)容，通常HTML5的type屬性，比如email、tel、number、data類(lèi)、url等，已經(jīng)自帶了簡(jiǎn)單的數(shù)據(jù)格式驗(yàn)證功能了，加上pattern后，前端部分的驗(yàn)證更加簡(jiǎn)單了。
顯而易見(jiàn)，pattern的屬性值要用正則表達(dá)式。
實(shí)例 簡(jiǎn)單的數(shù)字驗(yàn)證
數(shù)字的驗(yàn)證有兩個(gè)：
<input type="number" pattern="d">
<input type="number" pattern="[0-9]*">
15.input[number]類(lèi)型輸入非數(shù)字字符
js獲取的值是空；比如-12，+123等
16.Javascript：history.go()和history.back()的用法與區(qū)別？
簡(jiǎn)單的說(shuō)就是：go(-1):返回上一頁(yè)，原頁(yè)面表單中的內(nèi)容會(huì)丟失；back():返回上一頁(yè)，原頁(yè)表表單中的內(nèi)容會(huì)保留。history.go(-1):后退+刷新history.back():后退
之所以注意到這個(gè)區(qū)別，是因?yàn)椴煌臑g覽器后退行為也是有區(qū)別的，而區(qū)別就跟javascript：history.go()和history.back()的區(qū)別類(lèi)似。
Chrome和ff瀏覽器后退頁(yè)面，會(huì)刷新后退的頁(yè)面，若有數(shù)據(jù)請(qǐng)求也會(huì)提交數(shù)據(jù)申請(qǐng)。類(lèi)似于history.go(-1);
而safari（包括桌面版和ipad版）的后退按鈕則不會(huì)刷新頁(yè)面，也不會(huì)提交數(shù)據(jù)申請(qǐng)。類(lèi)似于javascript：history.back();
17.Meta基礎(chǔ)知識(shí)：
<meta name="viewport"content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
// width 設(shè)置viewport寬度，為一個(gè)正整數(shù)，或字符串‘device-width’
// height 設(shè)置viewport高度，一般設(shè)置了寬度，會(huì)自動(dòng)解析出高度，可以不用設(shè)置
// initial-scale 默認(rèn)縮放比例，為一個(gè)數(shù)字，可以帶小數(shù)
// minimum-scale 允許用戶(hù)最小縮放比例，為一個(gè)數(shù)字，可以帶小數(shù)
// maximum-scale 允許用戶(hù)最大縮放比例，為一個(gè)數(shù)字，可以帶小數(shù)
// user-scalable 是否允許手動(dòng)縮放
空白頁(yè)基本meta標(biāo)簽
<!-- 設(shè)置縮放 -->
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui" />
<!-- 可隱藏地址欄，僅針對(duì)IOS的Safari（注：IOS7.0版本以后，safari上已看不到效果） -->
<meta name="apple-mobile-web-app-capable" content="yes" />
<!-- 僅針對(duì)IOS的Safari頂端狀態(tài)條的樣式（可選default/black/black-translucent ） -->
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<!-- IOS中禁用將數(shù)字識(shí)別為電話(huà)號(hào)碼/忽略Android平臺(tái)中對(duì)郵箱地址的識(shí)別 -->
<meta name="format-detection"content="telephone=no, email=no" />
其他meta標(biāo)簽
<!-- 啟用360瀏覽器的極速模式(webkit) -->
<meta name="renderer" content="webkit">
<!-- 避免IE使用兼容模式 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- 針對(duì)手持設(shè)備優(yōu)化，主要是針對(duì)一些老的不識(shí)別viewport的瀏覽器，比如黑莓 -->
<meta name="HandheldFriendly" content="true">
<!-- 微軟的老式瀏覽器 -->
<meta name="MobileOptimized" content="320">
<!-- uc強(qiáng)制豎屏 -->
<meta name="screen-orientation" content="portrait">
<!-- QQ強(qiáng)制豎屏 -->
<meta name="x5-orientation" content="portrait">
<!-- UC強(qiáng)制全屏 -->
<meta name="full-screen" content="yes">
<!-- QQ強(qiáng)制全屏 -->
<meta name="x5-fullscreen" content="true">
<!-- UC應(yīng)用模式 -->
<meta name="browsermode" content="application">
<!-- QQ應(yīng)用模式 -->
<meta name="x5-page-mode" content="app">
<!-- windows phone 點(diǎn)擊無(wú)高光 -->
<meta name="msapplication-tap-highlight" content="no">
18.移動(dòng)端如何定義字體font-family？
@ --------------------------------------中文字體的英文名稱(chēng)
@ 宋體 SimSun
@ 黑體 SimHei
@ 微信雅黑 Microsoft Yahei
@ 微軟正黑體 Microsoft JhengHei
@ 新宋體 NSimSun
@ 新細(xì)明體 MingLiU
@ 細(xì)明體 MingLiU
@ 標(biāo)楷體 DFKai-SB
@ 仿宋 FangSong
@ 楷體 KaiTi
@ 仿宋_GB2312 FangSong_GB2312
@ 楷體_GB2312 KaiTi_GB2312
@
@ 說(shuō)明：中文字體多數(shù)使用宋體、雅黑，英文用Helvetica
body { font-family: Microsoft Yahei,SimSun,Helvetica; }
19.打電話(huà)發(fā)短信寫(xiě)郵件怎么實(shí)現(xiàn)？
// 一、打電話(huà) <a href="tel:0755-10086">打電話(huà)給:0755-10086</a> // 二、發(fā)短信，winphone系統(tǒng)無(wú)效 <a href="sms:10086">發(fā)短信給: 10086</a> // 三、寫(xiě)郵件 <a href="mailto:863139978@qq.com">點(diǎn)擊我發(fā)郵件</a> //2.收件地址后添加?cc=開(kāi)頭，可添加抄送地址（Android存在兼容問(wèn)題） <a href="mailto:863139978@qq.com?cc=zhangqian0406@yeah.net">點(diǎn)擊我發(fā)郵件</a> //3.跟著抄送地址后，寫(xiě)上&bcc=,可添加密件抄送地址（Android存在兼容問(wèn)題） <a href="mailto:863139978@qq.com?cc=zhangqian0406@yeah.net&bcc=384900096@qq.com">點(diǎn)擊我發(fā)郵件</a> //4.包含多個(gè)收件人、抄送、密件抄送人，用分號(hào)(;)隔開(kāi)多個(gè)郵件人的地址 <a href="mailto:863139978@qq.com;[url=mailto:384900096@qq.com]384900096@qq.com[/url]">點(diǎn)擊我發(fā)郵件</a> //5.包含主題，用?subject= <a href="mailto:863139978@qq.com?subject=郵件主題">點(diǎn)擊我發(fā)郵件</a> //6.包含內(nèi)容，用?body=;如內(nèi)容包含文本，使用%0A給文本換行 <a href="mailto:863139978@qq.com?body=郵件主題內(nèi)容%0A騰訊誠(chéng)信%0A期待您的到來(lái)">點(diǎn)擊我發(fā)郵件</a> //7.內(nèi)容包含鏈接，含http(s)://等的文本自動(dòng)轉(zhuǎn)化為鏈接 <a href="mailto:863139978@qq.com?body=http://www.baidu.com">點(diǎn)擊我發(fā)郵件</a> //8.內(nèi)容包含圖片（PC不支持） <a href="mailto:863139978@qq.com?body=<img src='images/1.jpg' />">點(diǎn)擊我發(fā)郵件</a> //9.完整示例 <a href="mailto:863139978@qq.com;[url=mailto:384900096@qq.com]384900096@qq.com[/url]?cc=zhangqian0406@yeah.net&bcc=993233461@qq.com&subject=[郵件主題]&body=騰訊誠(chéng)邀您參與%0A%0A[url=http://www.baidu.com]http://www.baidu.com[/url]%0A%0A<img src='images/1.jpg' />">點(diǎn)擊我發(fā)郵件</a>
藍(lán)藍(lán)設(shè)計(jì)的小編 http://m.dzxscac.cn