移動端WEB前端開發最佳實務

標籤：

移動端WEB前端開發最佳實務

• Safari，Android Browser，Chrome都是以WebKit為核心的
• 行動裝置和PC之間的頁面現實存在差異（Safari中定義了viewport）
• 在行動裝置和案頭端WEB前端開發中，事件綁定存在差異（移動觸點）
• 頁面控制項設計存差異（點觸不靈敏，虛擬鍵盤彈出框）
• 行動裝置的網路頻寬普遍比PC慢，移動頁面要設定更簡潔

PC頁面相容行動裝置

• 使用流式布局
• 藉助CSS Media queries（媒體查詢）技術
• 使用合適的圖片顯示相容方案
• 保持頁面簡潔，不要使用頁面不相容的技術（Flash技術降級方案，盡量不使用，使用HTML5 Canvas，避免使用播放，網路連接，儲存，訪問本地檔案等）
• 設定viewport
  
  
  • 增加連結和按鈕的可操作地區
  • 使用響應式設計架構（bootstrap,Zurb Foundation,Skeleton）
  • 使用工具檢查網頁的行動裝置相容性:MobiReady,W3C mobileOK Checker,iPadPeek讓使用者輸入測試網址,Howtogomo除了顯示截屏還提供建議

開發移動WEB網站的準備工作

• 確定支援的行動裝置（尺寸，DPI，記憶體，CPU效能，常用瀏覽器版本等）
• 處理和案頭端主網站的互動（User-Agent，用js判斷推薦使用Mobile-Detect,isMobile,提供了很多的介面調用，最簡單包括isMobile，isTablet）
• 設計移動網站為單頁模式，避免頁面跳轉
• 選擇一個合適的前端架構（JQuery-mobile，Sencha Touch，Kendo-UI，Ionic）
• 如何調試移動頁面（chrome內建的DEV，包括裝置型號，螢幕尺寸，User Agent等）

移動端的最佳實務

• HTML最佳實務：

  • 在頁面head中添加必要的meta和link資訊：

        <!-- 聲明文檔使用的字元編碼 -->                <meta charset=‘utf-8‘>                <!-- 優先使用 IE 最新版本和 Chrome -->                <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>                <!-- 頁面描述 -->                <meta name="description" content="不超過150個字元"/>                <!-- 頁面關鍵詞 -->                <meta name="keywords" content=""/>                <!-- 網頁作者 -->                <meta name="author" content="name, [email protected]"/>                <!-- 搜尋引擎抓取 -->                <meta name="robots" content="index,follow"/>                <!-- 為行動裝置添加 viewport -->                <meta name="viewport" content="initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no">                <!-- `width=device-width` 會導致 iPhone 5 添加到主屏後以 WebApp                 全螢幕模式開啟頁面時出現黑邊 http://bigc.at/ios-webapp-viewport-meta.orz -->                <!-- iOS 裝置 begin -->                <meta name="apple-mobile-web-app-title" content="標題">                <!-- 添加到主屏後的標題（iOS 6 新增） -->                <meta name="apple-mobile-web-app-capable" content="yes"/>                <!-- 是否啟用 WebApp 全螢幕模式，刪除蘋果預設的工具列和功能表列 -->                <meta name="apple-itunes-app" content="app-id=myAppStoreID,                 affiliate-data=myAffiliateData, app-argument=myURL">                <!-- 添加智能 App 廣告條 Smart App Banner（iOS 6+ Safari） -->                <meta name="apple-mobile-web-app-status-bar-style" content="black"/>                <!-- 設定蘋果工具列顏色 -->                <meta name="format-detection" content="telphone=no, email=no"/>                <!-- 忽略頁面中的數字識別為電話，忽略email識別 -->                <!-- 啟用360瀏覽器的極速模式(webkit) -->                <meta name="renderer" content="webkit">                <!-- 避免IE使用相容模式 -->                <meta http-equiv="X-UA-Compatible" content="IE=edge">                <!-- 不讓百度轉碼 -->                <meta http-equiv="Cache-Control" content="no-siteapp" />                <!-- 針對手持功能最佳化，主要是針對一些老的不識別viewport的瀏覽器，比如黑莓 -->                <meta name="HandheldFriendly" content="true">                <!-- 微軟的老式瀏覽器 -->                <meta name="MobileOptimized" content="320">                <!-- 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">                <!-- iOS 表徵圖 begin -->                <link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-57x5-precomposed.png"/>                <!-- iPhone 和 iTouch，預設 57x57 像素，必須有 -->                <link rel="apple-touch-icon-precomposed" sizes="114x114" href="/apple-touch-icon-114x14-precomposed.png"/>                <!-- Retina iPhone 和 Retina iTouch，114x114 像素，可以沒有，但推薦有 -->                <link rel="apple-touch-icon-precomposed" sizes="144x144" href="/apple-touch-icon-144x14-precomposed.png"/>                <!-- Retina iPad，144x144 像素，可以沒有，但推薦有 -->                <!-- iOS 表徵圖 end -->                <!-- iOS 啟動畫面 begin -->                <link rel="apple-touch-startup-image" sizes="768x1004" href="/splash-screen-768x1004.png"/>                <!-- iPad 豎屏 768 x 1004（標準解析度） -->                <link rel="apple-touch-startup-image" sizes="1536x2008" href="/splash-screen-1536x2008.png"/>                <!-- iPad 豎屏 1536x2008（Retina） -->                <link rel="apple-touch-startup-image" sizes="1024x748" href="/Default-Portrait-1024x748.png"/>                <!-- iPad 橫屏 1024x748（標準解析度） -->                <link rel="apple-touch-startup-image" sizes="2048x1496" href="/splash-screen-2048x1496.png"/>                <!-- iPad 橫屏 2048x1496（Retina） -->                <link rel="apple-touch-startup-image" href="/splash-screen-320x480.png"/>                <!-- iPhone/iPod Touch 豎屏 320x480 (標準解析度) -->                <link rel="apple-touch-startup-image" sizes="640x960" href="/splash-screen-640x960.png"/>                <!-- iPhone/iPod Touch 豎屏 640x960 (Retina) -->                <link rel="apple-touch-startup-image" sizes="640x1136" href="/splash-screen-640x1136.png"/>                <!-- iPhone 5/iPod Touch 5 豎屏 640x1136 (Retina) -->                <!-- iOS 啟動畫面 end -->                <!-- iOS 裝置 end -->                <meta name="msapplication-TileColor" content="#000"/>                <!-- Windows 8 磁貼顏色 -->                <meta name="msapplication-TileImage" content="icon.png"/>                <!-- Windows 8 磁貼表徵圖 -->                <link rel="alternate" type="application/rss+xml" title="RSS" href="/rss.xml"/>                <!-- 添加 RSS 訂閱 -->                <link rel="shortcut icon" type="image/ico" href="/favicon.ico"/>                <!-- 添加 favicon icon -->                <!-- sns 社交標籤 begin -->                <!-- 參考微博API -->                <meta property="og:type" content="類型" />                <meta property="og:url" content="URL地址" />                <meta property="og:title" content="標題" />                <meta property="og:image" content="圖片" />                <meta property="og:description" content="描述" />                <!-- sns 社交標籤 end -->

  • 利用行動裝置的便利性(GPS功能等)

      <a href="tel:1-406-666-xxxx">1-406-666-xxxx</a>    <a href="sms:1-406-666-xxxx">1-406-666-xxxx</a>

  • 不要使用iframe,謹慎使用table，盡量使用ul，ol代替table來顯示資料
  • 如果必須使用table的解決方案：
    
    • 按照顯示資料的優先順序，在小螢幕裝置中隱藏優先順序低的資料列
    • 把表格的橫向排列改成縱向排列
    • 連結引入用網頁提供的API，內容用XML或者JSON來引入
• CSS最佳實務：
  
  • 使用相對單位設定尺寸元素
  • 點擊控制項設定足夠大的尺寸
  • 可點控制項之間留足夠大的空間
  • 盡量少用圖片，使用內聯圖代替小圖片
  • 使用圖片：web fonts，font Awesome，Bootstrap Glyphicons等
  • 把小圖片轉化成Base64格式，並藉助Data URLs技術把圖片直接寫在CSS或者HTML文檔中，減少圖片的請求數目
  • 不要使用偽類hover設定懸停效果
  • 設定合理的字型大小（16px）和行高（1.5px）
  • 在不需要選中文字的地區禁用文字選中功能
• JS最佳實務：
  
  • 使用移動平台中特有的事件處理（手勢觸摸touchstart，touchmove，touchend，touchcancel）
  • tap和taphold事件，橫豎切換事件（orientationchange）
  • 謹慎使用標準對話方塊，避免快顯視窗（window.open）
  • 謹慎使用Timer（避免使用準確控制時間的任務）

移動端WEB前端開發最佳實務