H5移動端中必備技能

Meta基礎知識：

• H5頁面窗口自動調整到設備寬度，並禁止用戶縮放頁面<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />

• 可隱藏地址欄，僅針對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" />

• 啓用360瀏覽器的極速模式(webkit) <meta name="renderer" content="webkit">

• 避免IE使用兼容模式 <meta http-equiv="X-UA-Compatible" content="IE=edge">

• 針對手持設備優化，主要是針對一些老的不識別viewport的瀏覽器，好比黑莓 <meta name="HandheldFriendly" content="true">

• 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">

 

撥打電話，發送短信，郵件設置

 1、打電話

<a href="tel:0755-10086">打電話給:0755-10086</a>

 2、發短信，winphone系統無效

<a href="sms:10086">發短信給: 10086</a>

3、寫郵件

<a href="mailto:863139978@qq.com">點擊我發郵件</a>

一個完整的例子，包含收件人，抄送者，祕密抄送者，主題，內容。

<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>

 

 移動端touch事件

touchstart——當手指觸碰屏幕時候發生。無論當前有多少隻手指

touchmove——當手指在屏幕上滑動時連續觸發。一般咱們再滑屏頁面，會調用event的preventDefault()能夠阻止默認狀況的發生：阻止頁面滾動

touchend——當手指離開屏幕時觸發

touchcancel——系統中止跟蹤觸摸時候會觸發。例如在觸摸過程當中忽然頁面alert()一個提示框，此時會觸發該事件，這個事件比較少用

 

//TouchEvent說明：

touches：屏幕上全部手指的信息

targetTouches：手指在目標區域的手指信息

changedTouches：最近一次觸發該事件的手指信息

touchend時，touches與targetTouches信息會被刪除，changedTouches保存的最後一次的信息，最好用於計算手指信息

//參數信息(changedTouches[0])

clientX、clientY在顯示區的座標

target：當前元素

//事件響應順序

ontouchstart  > ontouchmove  > ontouchend > onclick

 

超實用的CSS樣式

 

// 禁止長按連接與圖片彈出菜單

a,img { -webkit-touch-callout: none }  

 

// 禁止ios和android用戶選中文字

html,body {-webkit-user-select:none; user-select: none; }

// 改變輸入框placeholder的顏色值

::-webkit-input-placeholder { /* WebKit browsers */color: #999; }

:-moz-placeholder { /* Mozilla Firefox 4 to 18 */color: #999; }

::-moz-placeholder { /* Mozilla Firefox 19+ */color: #999; }

:-ms-input-placeholder { /* Internet Explorer 10+ */color: #999; }

input:focus::-webkit-input-placeholder{ color:#999; }

例子：當咱們對input的placeholder的樣式進行設置時，代碼input::-webkit-input-placeholder {color: #FF0000;}

知識點：單冒號(:)用於CSS3僞類，雙冒號(::)用於CSS3僞元素。

css僞類：CSS 僞類用於向某些選擇器添加特殊的效果。

css僞元素：CSS 僞元素用於向某些選擇器設置特殊效果。

 

// android上去掉語音輸入按鈕

input::-webkit-input-speech-button {display: none}

// 阻止windows Phone的默認觸摸事件

/*說明：winphone下默認觸摸事件事件使用e.preventDefault是無效的，可經過樣式來禁用，如：*/

html { -ms-touch-action:none; } //禁止winphone默認觸摸事件

 

//取消input在ios下，輸入的時候英文首字母的默認大寫

<input autocapitalize="off" autocorrect="off" />

 

//IOS有拍照、錄像、選取本地圖片功能，部分Android只有選擇本地圖片功能。Winphone不支持

<input type="file" accept="images/*" />

<input type="file" accept="video/*" />

 

//屏幕旋轉的事件和樣式

 

//JS處理

function orientInit(){

   var orientChk = document.documentElement.clientWidth > document.documentElement.clientHeight?'landscape':'portrait';

   if(orientChk =='lapdscape'){

       //這裏是橫屏下須要執行的事件

   }else{

       //這裏是豎屏下須要執行的事件

   }

}

 

orientInit();

window.addEventListener('onorientationchange' in window?'orientationchange':'resize', function(){

   setTimeout(orientInit, 100);

},false)    

 

//CSS處理

//豎屏時樣式

@media all and (orientation:portrait){   }

//橫屏時樣式

@media all and (orientation:landscape){   }

 

//audio元素和video元素在ios和andriod中沒法自動播放

//音頻，寫法一

<audio src="music/bg.mp3" autoplay loop controls>你的瀏覽器還不支持哦</audio>

 

//音頻，寫法二

<audio controls="controls">

   <source src="music/bg.ogg" type="audio/ogg"></source>

   <source src="music/bg.mp3" type="audio/mpeg"></source>

   優先播放音樂bg.ogg，不支持在播放bg.mp3

</audio>

 

//JS綁定自動播放（操做window時，播放音樂）

$(window).one('touchstart', function(){

   music.play();

})

 

//微信下兼容處理

document.addEventListener("WeixinJSBridgeReady", function () {

   music.play();

}, false);

//小結

//1.audio元素的autoplay屬性在IOS及Android上沒法使用，在PC端正常

//2.audio元素沒有設置controls時，在IOS及Android會佔據空間大小，而在PC端Chrome是不會佔據任何空間

 

 

//IOS下可以使用 -webkit-text-size-adjust禁止用戶調整字體大小

body { -webkit-text-size-adjust:100%!important; }

 

 //JS判斷設備

function deviceType(){

   var ua = navigator.userAgent;

   var agent = ["Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod"];    

   for(var i=0; i<len,len = agent.length; i++){

       if(ua.indexOf(agent[i])>0){        

           break;

       }

   }

}

deviceType();

window.addEventListener('resize', function(){

   deviceType();

})

 

//JS判斷微信瀏覽器

function isWeixin(){

   var ua = navigator.userAgent.toLowerCase();

   if(ua.match(/MicroMessenger/i)=='micromessenger'){

       return true;

   }else{

       return false;

   }

}

//開啓硬件加速

//目前，像Chrome/Filefox/Safari/IE9+以及最新版本Opera都支持硬件加速，當檢測到某個DOM元素應用了某些CSS規則時就會自動開啓，從而解決頁面閃白，保證動畫流暢。

.css {

   -webkit-transform: translate3d(0,0,0);

   -moz-transform: translate3d(0,0,0);

   -ms-transform: translate3d(0,0,0);

   transform: translate3d(0,0,0);

}

//渲染優化

//1.禁止使用iframe（阻塞父文檔onload事件）

//2.禁止使用gif圖片實現loading效果（下降CPU消耗，提高渲染性能）

//使用CSS3代碼代替JS動畫；

//開啓GPU加速；

   //使用base64位編碼圖片(不小圖而言，大圖不建議使用)

   // 對於一些小圖標，可使用base64位編碼，以減小網絡請求。但不建議大圖使用，比較耗費CPU。小圖標優點在於：

   //1.減小HTTP請求；

   //2.避免文件跨域；

   //3.修改及時生效；

 

//畫三角形

作移動端的，常常會遇到小三角，大家仍是循序漸進的切圖作背景嗎，如今有全新的css知識來知足咱們的要求。

  這是一個li，直接貼代碼：

li:before { content: ''; width: 0; height: 0; bottom: 33px; left: -18px; position: absolute; border: 7px solid transparent; border-right: 12px solid #999;}