點(diǎn)擊與click事件
- 對于a標(biāo)記的點(diǎn)擊導(dǎo)航寒亥，默認(rèn)是在onclick事件中處理的跺讯。而移動(dòng)客戶端對onclick的響應(yīng)相比PC瀏覽器有著明顯的幾百毫秒延遲震庭。
在移動(dòng)瀏覽器中對觸摸事件的響應(yīng)順序應(yīng)當(dāng)是：
ontouchstart -> ontouchmove -> ontouchend -> onclick
因此鼻由，如果確實(shí)要加快對點(diǎn)擊事件的響應(yīng)担钮，就應(yīng)當(dāng)綁定ontouchend事件橱赠。
-
使用click會(huì)出現(xiàn)綁定點(diǎn)擊區(qū)域閃一下的情況，解決：給該元素一個(gè)樣式如下
-webkit-tap-highlight-color: rgba(0,0,0,0);
如果不使用click箫津，也不能簡單的用touchstart或touchend替代狭姨，需要用touchstart的模擬一個(gè)click事件，并且不能發(fā)生touchmove事件苏遥，或者用zepto中的tap（輕擊）事件饼拍。
body{ -webkit-overflow-scrolling: touch;}
用iphone或ipad瀏覽很長的網(wǎng)頁滾動(dòng)時(shí)的滑動(dòng)效果很不錯(cuò)吧？不過如果是一個(gè)div暖眼，然后設(shè)置 height:200px;overflow:auto;
的話惕耕，可以滾動(dòng)但是完全沒有那滑動(dòng)效果，很郁悶吧诫肠？
我看到很多網(wǎng)站為了實(shí)現(xiàn)這一效果司澎，用了第三方類庫欺缘，最常用的是iscroll（包括新浪手機(jī)頁，百度等） 我一開始也使用挤安，不過自從用了-webkit-overflow-scrolling: touch;
樣式后谚殊，就完全可以拋棄第三方類庫了，把它加在body{}區(qū)域蛤铜，所有的overflow需要滾動(dòng)的都可以生效了嫩絮。
鎖定 viewport
ontouchmove="event.preventDefault()" //鎖定viewport，任何屏幕操作不移動(dòng)用戶界面（彈出鍵盤除外）围肥。
利用 Media Query監(jiān)聽
Media Query 相信大部分人已經(jīng)使用過了剿干。其實(shí) JavaScript可以配合 Media Query這么用：
var mql = window.matchMedia("(orientation: portrait)");
mql.addListener(handleOrientationChange);
handleOrientationChange(mql);
function handleOrientationChange(mql) {
if (mql.matches) {
alert('The device is currently in portrait orientation ')
} else {
alert('The device is currently in landscape orientation')
}
}
借助了 Media Query 接口做的事件監(jiān)聽，所以很強(qiáng)大穆刻！
也可以通過獲取 CSS 值來使用 Media Query 判斷設(shè)備情況置尔，詳情請看：JavaScript 依據(jù) CSS Media Queries 判斷設(shè)備的方法。
rem最佳實(shí)踐
rem是非常好用的一個(gè)屬性氢伟，可以根據(jù)html來設(shè)定基準(zhǔn)值榜轿，而且兼容性也很不錯(cuò)。不過有的時(shí)候還是需要對一些莫名其妙的瀏覽器優(yōu)雅降級朵锣。以下是兩個(gè)實(shí)踐
http://jsbin.com/vaqexuge/4/edit 這有個(gè)demo谬盐，發(fā)現(xiàn)chrome當(dāng)font-size小于12時(shí)，rem會(huì)按照12來計(jì)算诚些。因此設(shè)置基準(zhǔn)值要考慮這一點(diǎn)
-
可以用以下的代碼片段保證在低端瀏覽器下也不會(huì)出問題
html { font-size: 62.5%; } body { font-size: 14px; font-size: 1.4rem; } /* =14px */ h1 { font-size: 24px; font-size: 2.4rem; } /* =24px */
當(dāng)前點(diǎn)擊元素樣式：
-webkit-tap-highlight-color: 顏色
檢測判斷 訪問終端
var browser={
versions:function(){
var u = navigator.userAgent, app = navigator.appVersion;
return {
trident: u.indexOf('Trident') > -1, //IE內(nèi)核
presto: u.indexOf('Presto') > -1, //opera內(nèi)核
webKit: u.indexOf('AppleWebKit') > -1, //蘋果飞傀、谷歌內(nèi)核
gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1,//火狐內(nèi)核
mobile: !!u.match(/AppleWebKit.*Mobile.*/), //是否為移動(dòng)終端
ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios終端
android: u.indexOf('Android') > -1 || u.indexOf('Adr') > -1, //android終端
iPhone: u.indexOf('iPhone') > -1 , //是否為iPhone或者QQHD瀏覽器
iPad: u.indexOf('iPad') > -1, //是否iPad
webApp: u.indexOf('Safari') == -1, //是否web應(yīng)該程序，沒有頭部與底部
weixin: u.indexOf('MicroMessenger') > -1, //是否微信 （2015-01-22新增）
qq: u.match(/\sQQ/i) == " qq" //是否QQ
};
}(),
language:(navigator.browserLanguage || navigator.language).toLowerCase()
}
//根據(jù)實(shí)際需求判斷終端及瀏覽器泣刹，進(jìn)行個(gè)性化適配和操作
if(browser.versions.mobile){
window.location.href="mobile.html"
}
阻止屏幕旋轉(zhuǎn)時(shí)字體自動(dòng)調(diào)整
html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6 {-webkit-text-size-adjust:none;}
模擬:hover偽類
因?yàn)閕Phone并沒有鼠標(biāo)指針助析，所以沒有hover事件。那么CSS :hover偽類就沒用了椅您。但是iPhone有Touch事件外冀，onTouchStart 類似 onMouseOver，onTouchEnd 類似 onMouseOut掀泳。所以我們可以用它來模擬hover雪隧。使用Javascript：
var myLinks = document.getElementsByTagName('a');
for(var i = 0; i < myLinks.length; i++){
myLinks[i].addEventListener(’touchstart’, function(){this.className = “hover”;}, false);
myLinks[i].addEventListener(’touchend’, function(){this.className = “”;}, false);
}
然后用CSS增加hover效果：
a:hover, a.hover { /* 你的hover效果 */ }
這樣設(shè)計(jì)一個(gè)鏈接，感覺可以更像按鈕员舵。并且脑沿，這個(gè)模擬可以用在任何元素上。
引導(dǎo)用戶安裝并打開app(From陽陽)
Android：
var iframe = document.createElement('iframe');
iframe.style.display = 'none';
iframe.src = 'qyfeixin://resources/wakeup';
setTimeout(function () {
document.body.appendChild(iframe);
}, 1000);iOS:
window.location.href="https://itunes.apple.com/us/app/xxxxxxxxxxxxxxx";
消除transition閃屏
兩個(gè)方法：使用css3動(dòng)畫的時(shí)盡量利用3D加速马僻，從而使得動(dòng)畫變得流暢庄拇。動(dòng)畫過程中的動(dòng)畫閃白可以通過 backface-visibility 隱藏。
-webkit-transform-style: preserve-3d;
/*設(shè)置內(nèi)嵌的元素在 3D 空間如何呈現(xiàn)：保留 3D*/
-webkit-backface-visibility: hidden;
/*（設(shè)置進(jìn)行轉(zhuǎn)換的元素的背面在面對用戶時(shí)是否可見：隱藏）*/
測試是否支持svg圖片
document.implementation.hasFeature("http:// www.w3.org/TR/SVG11/feature#Image", "1.1")
“隱私模式”
參考地址：http://blog.youyo.name/archives/smarty-phones-webapp-deverlop-advance.html
ios的safari提供一種“隱私模式”，如果你的webapp考慮兼容這個(gè)模式措近，那么在使用html5的本地存儲(chǔ)的一種————localStorage時(shí)溶弟，可能因?yàn)椤半[私模式”下沒有權(quán)限讀寫localstorge而使代碼拋出錯(cuò)誤，導(dǎo)致后續(xù)的js代碼都無法運(yùn)行了瞭郑。
既然在safari的“隱私模式”下辜御，沒有調(diào)用localStorage的權(quán)限，首先想到的是先判斷是否支持localStorage屈张，代碼如下：
if('localStorage' in window){
//需要使用localStorage的代碼寫在這
}else{
//不支持的提示和向下兼容代碼
}
測試發(fā)現(xiàn)擒权，即使在safari的“隱私模式”下，’localStorage’ in window的返回值依然為true阁谆，也就是說碳抄，if代碼塊內(nèi)部的代碼依然會(huì)運(yùn)行，問題沒有得到解決笛厦。 接下來只能相當(dāng)使用try catch了纳鼎，雖然這是一個(gè)不太推薦被使用的方法，使用try catch捕獲錯(cuò)誤裳凸，使后續(xù)的js代碼可以繼續(xù)運(yùn)行，代碼如下：
try{
if('localStorage' in window){
//需要使用localStorage的代碼寫在這
}else{
//不支持的提示和向下兼容代碼
}
}catch(e){
// 隱私模式相關(guān)提示代碼和不支持的提示和向下兼容代碼
}
所以劝贸，提醒大家注意姨谷，在需要兼容ios的safari的“隱私模式”的情況下，本地存儲(chǔ)相關(guān)的代碼需要使用try catch包裹并降級兼容映九。
localStorage:
var v = localStorage.getItem('n') ? localStorage.getItem('n') : ""; // 如果名稱是 n 的數(shù)據(jù)存在 梦湘，則將其讀出 ，賦予變量 v 件甥。
localStorage.setItem('n', v); // 寫入名稱為 n捌议、值為 v 的數(shù)據(jù)
localStorage.removeItem('n'); // 刪除名稱為 n 的數(shù)據(jù)
使用特殊鏈接：
如果你關(guān)閉自動(dòng)識(shí)別后 ，又希望某些電話號碼能夠鏈接到 iPhone 的撥號功能 引有，那么可以通過這樣來聲明電話鏈接 ,
<a href="tel:12345654321">打電話給我</a>
<a href="sms:12345654321">發(fā)短信</a>
或用于單元格：
<td onclick="location.href='tel:122'">
自動(dòng)大寫與自動(dòng)修正
要關(guān)閉這兩項(xiàng)功能瓣颅，可以通過autocapitalize 與autocorrect 這兩個(gè)選項(xiàng)：
<input type="text" autocapitalize="off" autocorrect="off" />
不讓 Android 識(shí)別郵箱
<meta content="email=no" name="format-detection" />
禁止 iOS 彈出各種操作窗口
-webkit-touch-callout:none
禁止用戶選中文字
-webkit-user-select:none
音頻跟視頻
<audio autoplay ><source src="audio/alarm1.mp3" type="audio/mpeg"></audio>
系統(tǒng)默認(rèn)情況下 audio的autoplay屬性是無法生效的，這也是手機(jī)為節(jié)省用戶流量做的考慮譬正。 如果必須要自動(dòng)播放宫补，有兩種方式可以解決。
1.捕捉一次用戶輸入后曾我，讓音頻加載粉怕，下次即可播放。
//play and pause it once
document.addEventListener('touchstart', function () {
document.getElementsByTagName('audio')[0].play();
document.getElementsByTagName('audio')[0].pause();
});
這種方法需要捕獲一次用戶的點(diǎn)擊事件來促使音頻跟視頻加載抒巢。當(dāng)加載后贫贝，你就可以用javascript控制音頻的播放了，如調(diào)用audio.play()
2.利用iframe加載資源
var ifr=document.createElement("iframe");
ifr.setAttribute('src', "http://mysite.com/myvideo.mp4");
ifr.setAttribute('width', '1px');
ifr.setAttribute('height', '1px');
ifr.setAttribute('scrolling', 'no');
ifr.style.border="0px";
document.body.appendChild(ifr);
這種方式其實(shí)跟第一種原理是一樣的蛉谜。當(dāng)資源加載了你就可以控制播放了稚晚，但是這里使用iframe來加載崇堵，相當(dāng)于直接觸發(fā)資源加載。 注意蜈彼，使用創(chuàng)建audio標(biāo)簽并讓其加載的方式是不可行的筑辨。 慎用這種方法，會(huì)對用戶造成很糟糕的影響幸逆。棍辕。
Iphone的媒體查詢
@media (device-height : 480px ) and (-webkit-min-device-pixel-ratio: 2 ){ /* 兼容iphone4/4s */
body,html {
font-size:9px !important;
}
.panel-center img{
width:100px !important;
}
}
@media (device-height : 568px ) and (-webkit-min-device-pixel-ratio: 2 ){ /* 兼容iphone5 */
body,html {
font-size:9px !important;
}
.panel-center img{
width:100px !important;
}
}
@media (device-height : 667px ) and (-webkit-min-device-pixel-ratio: 2 ){ /* 兼容iphone6 */
body,html {
font-size:12px !important;
}
}
@media (device-height : 736px ) and (-webkit-min-device-pixel-ratio: 2 ){ /* 兼容iphone6 Plus */
body,html {
font-size:14px !important;
}
.panel-center img{
width:130px !important;
}
}
媒體查詢，響應(yīng)不同啟動(dòng)圖片
<link href="startup-568h.png" rel="apple-touch-startup-image" media="(device-height: 568px)">
<link href="startup.png" rel="apple-touch-startup-image" sizes="640x920" media="(device-height: 480px)">
拍照上傳
<input type="file" accept="image/*" capture="camera">
<input type="file" accept="video/*" capture="camcorder">
<input type="file" accept="audio/*" capture="microphone">
分別調(diào)用手機(jī)拍照还绘、攝像楚昭、錄音功能。
PS：該屬性存在瀏覽器兼容性問題拍顷，不是所有的瀏覽器都支持抚太。親測ios safari可用。
