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

来源:http://www.cnblogs.com/nield-bky/archive/2017/07/12/7156810.html
-Advertisement-
Play Games

上個周周末，接手了一個移動端的(外包)小項目，一直著手於PC端，對移動端還是一知半解，所以這也是我的一個挑戰，因此，今天心血來潮，總結一些移動端的基礎知識和技巧供自己以後方便查閱，歡迎大家補充或轉載： 一.單位(px,em,rem) 1.px：屏幕設備物理上能顯示出的最小的一個點，不同設備上點的長寬 ...


上個周周末，接手了一個移動端的(外包)小項目，一直著手於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();//取消事件的預設動作(如果存在這樣的動作)
}

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

 

作者：丿kiss丶小波 出處：http://www.cnblogs.com/Lxb98117/ 本文版權歸作者和博客園共有，歡迎轉載，但未經作者同意必須保留此段聲明。
您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 微信小程式+OLAMI(歐拉蜜)自然語言API介面製作智能查詢工具--快遞、聊天、日曆等
    微信小程式最近比較熱門，再加上自然語義理解也越來越被人關註，於是我想趕趕潮流，做一個小程式試試。想來想去快遞查詢應該是一種比較普遍的需求。 如果你也在通過自然語言介面做點什麼，希望我的這篇博客能幫到你。我建了一個QQ群656580961，感興趣的朋友可以加入互通有無。或者你也可以直接下載代碼試一試。 ...
  • Bootstrap自動定位浮標
    前面的話 Affix 插件主要功能就是通過插件給某個元素（需要固定的元素）添加或刪除position:fixed，實現元素在瀏覽器視窗的粘性固定效果。本文將詳細介紹Bootstrap自動定位浮標 基本用法 首先，來看一個蘋果官網對自動定位浮標的應用 從上面的git圖中可知，Macbook一欄滾動到一 ...
  • es6的擴展運算符，箭頭函數，函數參數
    1. 擴展運算符： 2. 箭頭函數： 3. 擴展參數(預設參數,擴展參數,剩餘函數)： //預設參數 let sayHellow = (name,age=30)= { let str = console.log(str); } sayHellow("songze",25);//控制台列印songze ...
  • 用戶管理的設計--3.jquery的ajax實現二級聯動
    頁面效果 實現步驟 1.引入struts整合json的插件包 2.頁面使用jquery的ajax調用二級聯動的js 3.在Action類中定義findJctUnit()方法，這裡要將返回的List集合放置到棧頂，struts2將其轉換成json數據 struts2的插件包會將壓入到struts2值棧 ...
  • 參數預設值，剩餘參數，拓展參數(default spread rest parameter)
    參數預設值，剩餘參數，拓展參數(default spread rest parameter) 預設參數 let aa=(name='wwrs')= { console.log( ); } aa();//Hello wwrs aa('sss');//Hello sss 擴展參數 let bb=(a,b ...
  • 箭頭函數（arrow function）
    箭頭函數（arrow function） 基本格式 let say333=()= { console.log("333");//333 } say333(); (name)= { console.log(name); } 調用一個小括弧可以去掉 2個小括弧就不能去掉 name= { console. ...
  • HTML5 伺服器推送事件（Server-sent Events）
    伺服器推送事件（Server-sent Events）WebSocket 協議的一種伺服器向客戶端發送事件&數據的單向通訊。目前所有主流瀏覽器均支持伺服器發送事件，當然除了 Internet Explorer 。2333... WebSocket 協議是繼HTTP協議後又一伺服器客戶端通訊協議，不同 ...
  • JavaScript URL傳值過程中遇到的問題及知識點總結
    JavaScript URL傳值過程中遇到的問題及知識點總結 Web系統開發過程中經常用到URL進行傳值，剛剛接觸時不太會解析，會出現中文亂碼問題等。 1、父子頁面之間的傳值（在一個頁面中以載入iframe框架的形式調出另一個頁面）。 var URL=“XXXX..?code=aaa&name=li ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類