無線web開發(fā)經(jīng)驗(yàn)（5）—— 開發(fā)技巧（Tips）

點(diǎn)擊與click事件

  • 對(duì)于a標(biāo)記的點(diǎn)擊導(dǎo)航，默認(rèn)是在onclick事件中處理的。而移動(dòng)客戶端對(duì)onclick的響應(yīng)相比PC瀏覽器有著明顯的幾百毫秒延遲。
    在移動(dòng)瀏覽器中對(duì)觸摸事件的響應(yīng)順序應(yīng)當(dāng)是：

ontouchstart -> ontouchmove -> ontouchend -> onclick

因此，如果確實(shí)要加快對(duì)點(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è)備情況，詳情請(qǐng)看：JavaScript 依據(jù) CSS Media Queries 判斷設(shè)備的方法。

rem最佳實(shí)踐

rem是非常好用的一個(gè)屬性，可以根據(jù)html來設(shè)定基準(zhǔn)值，而且兼容性也很不錯(cuò)。不過有的時(shí)候還是需要對(duì)一些莫名其妙的瀏覽器優(yōu)雅降級(jí)。以下是兩個(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陽陽)

消除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)換的元素的背面在面對(duì)用戶時(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包裹并降級(jí)兼容。

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í)別后 ，又希望某些電話號(hào)碼能夠鏈接到 iPhone 的撥號(hào)功能 ，那么可以通過這樣來聲明電話鏈接 ,

<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ì)對(duì)用戶造成很糟糕的影響。。

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可用。

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。