前言:javascript
一直想作一個移動端的階段性學習總結,可是工做太忙老是加班。如今總算能夠抽出一點時間來寫一寫,把知道的都寫下來,這樣就算忘掉了,也能很快想起來,不要太機智啊,哈哈哈!css
1、移動端頁面常識html
1.常見操做系統:Android、IOS、Firefox、osjava
2.使用內核:webkit(Android、IOS), greasemonkey(Firefox、os)git
3.在移動端上,要使用手勢操做代替鼠標輸入/輸出事件github
4.請務必使用響應式佈局來設計移動端頁面web
5.用CSS3動畫代替傳統的DOM animation(CSS3動畫可使用移動端設備的GPU渲染)canvas
6.移動端開發,要用輕量級框架和庫(一切爲了快!再快!更快!同時還能夠節省用戶流量)後端
7.使用canvas代替image標籤(由於image在屌絲機上會讓你卡!到!爆!)瀏覽器
8.下降請求數(讓你的頁面加載速度飛起來!下降後端壓力,你好我也好!)
9.合理使用漸變、圓角、陰影(別太多,屌絲機不兼容 T.T )
2、移動端要關注的head頭標籤
1.<!DOCTYPE html> 告訴瀏覽器,文檔類型是HTML5,不用區分大小寫
2.<meta charset="UTF-8" /> 聲明文檔採用的編碼格式
3.SEO優化:
<title>標題</title> 定義標題,方便搜索引擎搜索
<meta name="keywords" content="移動主頁" /> 定義關鍵字,方便搜索引擎搜索
<meta name="description" content="這是靈魂dancing的我的主頁,歡迎參觀" /> 定義頁面描述內容,方便搜索引擎搜索
<meta name="robots" content="index,follow" /> 定義網頁索引方式,設定站點內容是否公開
設定爲all:文件將被檢索,且頁面上的連接能夠被查詢;
設定爲none:文件將不被檢索,且頁面上的連接不能夠被查詢;
設定爲index:文件將被檢索;
設定爲follow:頁面上的連接能夠被查詢;
設定爲noindex:文件將不被檢索,但頁面上的連接能夠被查詢;
<meta name="author" content="靈魂dancing" /> 定義網頁做者,方便搜索引擎搜索
4.<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> 對於不一樣移動設備,分辨率物理尺寸不同,會進行一些縮放,爲了展現效果同樣就要設置viewport
width:寬度,width=device-width
height:高度,height=device-height
initial-scale:初始縮放比例,initial-scale=1.0
maximum-scale:最大縮放比例, maximum-scale=1.0
user-scalable:是否容許用戶縮放, user-scalable=yes/no
5.禁止數字自動識別爲電話,禁止自動轉地址和郵件爲連接
<meta content="telephone=no" name="format-detection">
<meta content="address=no" name="format-detection">
6.支持開放內容協議,使你的網頁變成「富媒體對象」,支持分享到其餘社會化網站,如facebook、人人等
<meta property=og:title content="">
<meta property=og:description content="">
<meta property=og:url content=http://m.baidu.com>
<meta property=og:content content="">
7.IOS設備
<meta name="apple-mobile-web-app-capable" content="yes" /> 啓用webapp全屏模式
<meta name="apple-mobile-web-app-title" content="靈魂dancing" /> 添加頁面到桌面時,設置標題
<link rel="apple-touch-icon-precomposed" href="images/57x57.png" /> IOS的webapp必備!
rel:圖片自動處理成圓角和高光效果,apple-touch-icon-precomposed表示禁止自動添加效果,直接顯示原圖
3、移動端頁面圖標使用推薦:
1.SVG實現:矢量圖標,自適應窗口大小。下面連接是阿里矢量圖庫,海量圖標等你來取~
http://iconfont.cn/repositories
2.CSS3實現:純CSS3實現的圖標,更輕量級,更方便。嚴重推薦!
http://saeedalipoor.github.io/icono/
4、移動端最佳框架推薦
requireJS:最小巧的javascript載入框架,定義javascript模塊。
Zepto.js:使用方法與jQuery相同,輕量級框架,能夠認爲是jQuery的移動精簡版。
5、小技巧
1.能夠屏蔽點擊元素時出現的陰影,經常使用於有事件代理的父節點
內容持續更新中...
若有錯誤的地方或者更好用的方法,但願你們能在評論區留言指正,讓咱們共同進步!