移動端基礎知識技巧總結
上個周周末，接手了一個移動端的(外包)小項目，一直著手於PC端，對移動端還是一知半解，所以這也是我的一個挑戰，因此，今天心血來潮，總結一些移動端的基礎知識和技巧供自己以後方便查閱，歡迎大家補充或轉載：
一.單位(px,em,rem)
1.px：屏幕設備物理上能顯示出的最小的一個點，不同設備上點的長寬，比例不一定相同；
2.em/rem：相同點：都是一個相對大小的值；不同點：em是相對父級元素，rem是相對html(默認值視瀏覽器而定，Chrome的默認為16px)；
rem單位在移動端前端開發很流行。rem單位確實好處蠻多的，它是相對於根節點，讓我們整個網站單位可以統一。還可以讓我們的字體更好的自適應網站的大小，但是，你用過了就知道，它會出現一個問題：用Chrome瀏覽器打開你做的網站的時候，有時候會出現字體很大的情況。但是刷新一下頁面就好了。
之所以會出現這種情況，原因是因為我們為了計算方便，將原本默認1rem=16px修改1rem=10px；因此，我們在html中通常做了如下設置：
html{
font-size:62.5%;/*10÷16×100=62.5% 1rem=10px*/
}
但是呢，Chrome瀏覽器有時候會忽略了html的設置，於是在初始化頁面的時候，出現了上面字體過大的情況。仔細研究會發現，出現字體過大的“元素”，通常是沒有設置font-size的，元素的font-size是繼承根目錄的，因此，解決方案為：在你要展現的文字父級或者其本身設置font-size；
二.頭部信息：
1.DOCTYPE(Docment Type)：此標簽告知瀏覽器文檔使用哪種html或者 xhtml 規範，不區分大小寫，HTML代碼：
<!DOCTYPE html><!-- 使用HTML5 DOCTYPE 不區分大小寫 -->
2.lang：此屬性放在<html>標簽中用於設置文檔的語言類型(英語:en；中文:zh等)，HTML代碼：
<html lang="en"> ... </html>
3.charser：聲明文檔使用的字符編碼(GBK，UTF-8)，HTML代碼：
<meta charset ="UTF-8">
4.format-detection(識別規則)→content參數(默認都是yes)：
telephone：數字轉化為撥號鏈接(yes/no)——no：禁止把數字轉化為撥號鏈接，yes：開啟把數字轉化為撥號鏈接；
email：識別郵箱(yes/no)——no：禁止作為郵箱地址，yes：開啟把文字默認為郵箱地址；
adress：點擊地址跳轉至地圖——no：禁止跳轉至地圖，yes：開啟點擊地址跳轉至地圖的功能；
<meta name="format-detection" content="telephone=no,email=no ,,adress=no"/>
5.viewport(針對移動設備) →content 參數：
width：viewport寬度；height：viewport 高度(通常可以不設置)；initial-scale：初始縮放比例；maximum-scale：最大縮放比例；minimum-scale：最小縮放比例；user-scalable：是否允許縮放(yes/no)
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no"/>
6.SEO優化：
title(頁面標題)：<title>your title</title>
keywords(頁面關鍵詞)：<meta name="keywords" content="your keywords"/>
description(頁面描述)：<meta name="description" content="your description"/>
author(網頁作者)：<meta name="author" content="author name"/>
robots(網頁搜索引擎索引方式)：robotterms是一組使用逗號(,)分割的值，通常取值：
none：搜索引擎將忽略此網頁，等同於noindex，nofollow；
noindex：搜索引擎不索引此網頁；nofollow：搜索引擎不繼續通過此網頁的鏈接索引搜索其它的網頁；
all：搜索引擎將索引此網頁與繼續通過此網頁的鏈接索引，等同於index，follow；
index：搜索引擎索引此網頁；follow：搜索引擎繼續通過此網頁的鏈接索引搜索其它的網頁；
<meta name="robots" content="index,follow"/> <!-- ps：如果網頁沒有提供robots，搜索引擎認為網頁的robots屬性為all(index和follow -->
三.移動端開發常見兼容性：
1.H5頁面窗口自動調整到設備寬度，禁止用戶縮放
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum=1.0,minimum=1.0,user-scalable=no"/>
2.忽略將頁面中的數字識別為電話號碼(ios設備容易出現)
<meta name="format-detection" content="telephone=no"/>
3.忽略頁面中對郵箱地址的識別(android設備容易出現)
<meta name="format-detection" content="email=no"/>
4.上下拉動滾動條時卡頓
body{
-webkit-overflow-scrolling:touch;
overflow-scrolling:touch;
}
5. 禁止復制，選中文本
body{
-webkit-user-select:none;
-moz-user-select:none;
-khtml-user-select:none;
user-select:none;
}
6.長時間按住頁面出現閃退
html{
-webkit-touch-callout:none;
}
7. IOS/Android觸摸元素時出現半透明灰色遮罩
html{
-webkit-tab-highlight-color:rgba(255,255,255,0);
}
8. 偽類 :active失效
方法一：<body ontouchstart=””><!-- 給body添加 ontouchstart -->
方法二：js給document綁定 touchstart 或 touchend 事件 document.addEventListener(‘touchstart’,function(){},false);
9. 降級處理(CSS3)
if(‘transition‘ in document.documentElement.style){
console.log(‘支持transitioin’);
}else{//這裏進行降級處理，調用不同的CSS
console.log(‘不支持transition’);
}
10.旋轉屏幕時，調整字體大小
html,body,form,fieldset,p,div,h1,h2,h3,h4,h5,h6{
-webkit-text-size-adjust:100%;
}
11.某些Android圓角失效
background-clip:padding-box;
12.IOS中input鍵盤事件支持不是很好(通過html5的oninput達到類似 keyup 的的效果)
document.getElementById(‘inputId‘).addEventListener(‘input‘,function(e){
var e = e || event;// 瀏覽器兼容性處理
var value = e.target.value;
console.log(value);
});
13.消除IE裏面那個叉號
input:-ms-clear{
display:none;
}
14. IOS設備上輸入框默認內陰影
html{
-webkit-appearance:none;
}
15.IOS設置input按鈕樣式會被默認樣式覆蓋
input,textarea{
border:0;
-webkit-appearance:none;
}
16. IOS鍵盤字母輸入，默認首字母大寫
<input type="text" autocapitalize="off"/>
17. input 類型 設置為 number 的問題：
17-1.maxlength屬性用不了：<input type="number" oninput="checkLength(this,5)"/>
function checkLength(obj,length){
if(obj.value.length > length){
obj.value = obj.value.substr(0,length);
}
}
17-2.設置step(默認為1)：<input type="number" step="0.01"/>
17-3.去除input默認樣式
input[type=number]{
-moz-appearance:textfield;
}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button{
-webkit-appearance:none;
margin:0;
}
四.移動端事件(click點透)：
1.事件的變化：
① PC端的鼠標事件(失效)：mousedown、mouseup、mousemove、mouseover、mouseout、mouseenter、mouseleave
② 幾個原始事件取代click點擊事件(移動端click事件也存在，但會有一個200ms~300ms的觸發延時問題)：
touchstart→觸控開始時觸發，類似於mousedown
touchmove→觸控點在屏幕上移動時觸發，類似於mousemove
在移動設備上，觸控點從一個元素移動到另一個元素上時，不會像PC端一樣觸發類似mouseover、mouseout、mouseenter、mouseleave等事件
touchend→觸控結束時觸發，類似於mouseup
touchcancel→更高級別的事情發生時觸發，比如在遊戲中突然來電話，就會觸發touchcancel事件，並且在touchcancel時保存當前遊戲的狀態信息
③ PC端一臺機器只有一個鼠標，與鼠標相關的屬性都放到了一個event對象上；
移動端設備大多支持多點觸控，一個事件可能與多個觸控點相關，每個觸控點都需要記錄自己單獨的屬性，與touch相關的屬性都是TouchList類型，觸控位置、目標元素，全部放到了touch對象上；
touches→當前屏幕的手指列表；changedTouches→觸發當前事件的手指列表；targetTouches→當前元素上的手指列表；
touch對象主要屬性：
clientX / clientY→觸控點相對瀏覽器窗口的位置；pageX / pageY→觸控點相對頁面的位置；screenX / screenY→觸控點相對屏幕的位置；
identifier→touch對象的ID；target→當前的DOM元素 ， 該屬性是觸控事件最先發生的元素
2.click點透事件：
① 什麽是click點透 ：舉個例子，現有A(上)、B(下)兩個盒子重疊排列，盒子A有綁定touchend事件，事件處理為隱藏盒子A，盒子B有綁定click事件，此時點擊盒子A一次，也會觸發到盒子B的click事件
② 點透出現的場景 ：A / B兩個元素層上下Z軸重疊，上層的A元素點擊後消失或移開，下層的B元素有默認的click事件(如a標簽)，或 B元素綁定了click事件
③ 為什麽會出現點透 ：移動端click事件有明顯的延遲，touchstart和click的區別：
touchstart：這個DOM(或冒泡到這個DOM)上手指觸摸開始即能立即觸發；
click： 這個DOM(或冒泡到這個DOM)上手指觸摸開始，且手指未曾在屏幕上移動(某些瀏覽器允許移動一個非常小的位移值)，
且在這個DOM上手指離開屏幕，且觸摸和離開屏幕之間的間隔時間較短(某些瀏覽器不檢測間隔時間，也會觸發click)才能觸發；
④ 如何解決 ：
對於B元素本身沒有默認click事件的情況，應統一使用touch事件，統一代碼風格，並且由於click事件在移動端的延遲要大很多，不利於用戶體驗，所以關於觸摸事件應盡量使用touch相關事件；
對於B元素本身存在默認click事件的情況,應及時取消B元素的默認點擊事件，從而阻止click事件的產生，即應在 touch函數中取消事件的默認動作：
if(e.type == "touchend"){
e.preventDefault();//取消事件的默認動作(如果存在這樣的動作)
}
好的，以上就是我從那個小的項目中獲取的一些移動端的基礎知識和技巧，歡迎各位看官轉載或補充哦！
移動端基礎知識技巧總結