【乾貨】移動端基礎知識技巧總結

時間 2019-11-08

標籤乾貨移動基礎知識技巧總結欄目無線简体版

原文原文鏈接

上個週週末，接手了一個移動端的(外包)小項目，一直着手於PC端，對移動端仍是隻知其一;不知其二，因此這也是個人一個挑戰，所以，今天心血來潮，總結一些移動端的基礎知識和技巧供本身之後方便查閱，歡迎你們補充或轉載：html

　　一.單位(px,em,rem)前端

　　1.px：屏幕設備物理上能顯示出的最小的一個點，不一樣設備上點的長寬，比例不必定相同；html5

　　2.em/rem：相同點：都是一個相對大小的值；不一樣點：em是相對父級元素，rem是相對html(默認值視瀏覽器而定，Chrome的默認爲16px)；android

　　rem單位在移動端前端開發很流行。rem單位確實好處蠻多的，它是相對於根節點，讓咱們整個網站單位能夠統一。還可讓咱們的字體更好的自適應網站的大小，可是，你用過了就知道，它會出現一個問題：用Chrome瀏覽器打開你作的網站的時候，有時候會出現字體很大的狀況。可是刷新一下頁面就行了。ios

　　之因此會出現這種狀況，緣由是由於咱們爲了計算方便，將本來默認1rem=16px修改1rem=10px；所以，咱們在html中一般作了以下設置：web

html{
    font-size:62.5%;/*10÷16×100=62.5%   1rem=10px*/
}

　　可是呢，Chrome瀏覽器有時候會忽略了html的設置，因而在初始化頁面的時候，出現了上面字體過大的狀況。仔細研究會發現，出現字體過大的「元素」，一般是沒有設置font-size的，元素的font-size是繼承根目錄的，所以，解決方案爲：在你要展示的文字父級或者其自己設置font-size；api

　　二.頭部信息：瀏覽器

　　1.DOCTYPE(Docment Type)：此標籤告知瀏覽器文檔使用哪一種html或者 xhtml 規範，不區分大小寫，HTML代碼：app

<!DOCTYPE html><!-- 使用HTML5 DOCTYPE 不區分大小寫 -->

　　2.lang：此屬性放在<html>標籤中用於設置文檔的語言類型(英語:en；中文:zh等)，HTML代碼：ide

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

　　　　方法二：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();//取消事件的默認動做(若是存在這樣的動做)
}

　　好的，以上就是我從那個小的項目中獲取的一些移動端的基礎知識和技巧，歡迎各位看官轉載或補充哦！

做者：丿kiss丶小波

出處： http://www.cnblogs.com/Lxb98117/

本文版權歸做者和博客園共有，歡迎轉載，但未經做者贊成必須保留此段聲明。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。