移動端web學習總結

前言: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:文件將不被檢索,但頁面上的連接能夠被查詢;

  設定爲nofollow:文件將不被檢索,頁面上的連接能夠被查詢。

<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.能夠屏蔽點擊元素時出現的陰影,經常使用於有事件代理的父節點

-webkit-tap-highlight-color: reba(255,255,255,0);
 
2.使用flex伸縮佈局
 
3.打開數字鍵盤
<input type=「tel」>
 
4.隱藏地址欄
setTimeout(function(){
  window.scrollTo(0,1);
},0);
 
5.使用tap fastclick,解決click延遲問題,防止點擊穿透
 
6.橫豎屏切換
<style media=「all and (orienttation:poortrait)」 type=「text/css">
  豎屏
</style> 
<style media=「all and (orienttation:landscape)」 type=「text/css">
  橫屏
</style>
 

內容持續更新中...

若有錯誤的地方或者更好用的方法,但願你們能在評論區留言指正,讓咱們共同進步!

相關文章
相關標籤/搜索