移動開發學習筆記

標籤：

1 移動WEB開發入門

1)native 本地應用使用JAVA 、Objective-C、Swift開發

webAPP 網頁應用HTML5開發

hybrid 混合應用ooxx(native,web)

2)文字 固定大小用px；多屏適配統一修改的話用rem

3)viewport

width - viewport的寬度

height - viewport的高度

initial-scale - 初始的縮放比例

maximum-scale - 允許使用者縮放到的最大比例

user-scalable - 使用者是否可以手動縮放

橫屏/豎屏

window.addEventListener(‘orientationchange‘, function() {   // rerender something});console.log(window.orientation); // 0, 90, 180, -90 順時針角度<style media="all and (orientation:portrait)" type="text/css">    /* 豎屏 */</style><style media="all and (orientation:landscape)" type="text/css">    /* 橫屏 */</style>

　　

matchMedia

FLEX 伸縮布局


 display: -webkit-flex;  display: flex;}.initial {  -webkit-flex: initial;          flex: initial;  width: 200px;  min-width: 100px;}.none {  -webkit-flex: none;          flex: none;  width: 200px;}.flex1 {  -webkit-flex: 1;          flex: 1;}.flex2 {  -webkit-flex: 2;          flex: 2;}

　　4) 開啟數字軟體盤

<input type="tel">

　　5）隱藏地址欄

setTimeout(function(){window.scrollTo(0,1);},0);

　　6)在iPhone,iPad,iTouch的safari上可以使用添加到主屏按鈕將網站添加到主畫面上

<link rel="apple-touch-icon" href="apple-touch-icon-iphone.png" /><link rel="apple-touch-icon" sizes="72x72" href="apple-touch-icon-ipad.png" /><link rel="apple-touch-icon" sizes="114x114" href="apple-touch-icon-iphone4.png" />

　7)click 有 300± ms 延遲，使用 fastclick 後, 可以解決 click 的延遲, 還可以防止 穿透

  8）地區滾動 overflow:auto 不靠譜，使用iscroll ，saber-scroll

  9）使用者手勢集合

 10）webkit-tap-highlight-color:RGBA(255,255,255,0)

可以屏蔽點擊元素時出現的陰影, 常用於有事件代理的父元素

　

  2 移動端真機調試終極利器-BrowserSync   3 淺談移動前端的最佳實務東西講的很多，滿滿都是幹活，只好慢慢看了~

1) spa（single page application）也就是我們常常說的web應用程式webapp，被認為是業內的發展趨勢，主要有兩個優點：

① 使用者體驗好

② 可以更好的降低伺服器壓力

但是單頁有幾個致命的缺點：

① SEO支援不好，往往需要單獨寫程式處理SEO問題

② webapp本身的記憶體管理難，Javascript、Css非常容易互相影響

架構選擇

jQuery大而全，相容、效能良好；Zepto針對移動端定製，一些地方缺少相容，但是尺寸小

MVC架構選擇

MVC架構流行的有Backbone、angularJS、reactJS、canJS等

網路請求

① CSS Sprites

② lazyload

③ 合并指令碼js檔案

④ localsorage

工作中實際使用的離線緩衝有localstorage與Application cache，這兩個皆是好東西，一個常用於ajax請求緩衝，一個常用於靜態資源緩衝

localstorage不被爬蟲識別，不能跨域共用，所以不要用以儲存業務關鍵資訊，更加不要儲存安全資訊

Application cache是HTML5新增api，雖然都是儲存，卻與localstorage、cookie不太相同，Application cache儲存的是一般是靜態資源，允許瀏覽器請求這些資源時不必通過網路，設計得當的情況可以取代Hybrid的儲存靜態資源，使用Application cache主要優點是：

使用Application cache可以提升網站載入速度，主要體現在請求傳輸上，把一些http請求轉為本地讀取，有效地降低網路延遲，降低http請求，使用簡單，還節約流量何樂而不為？

 總結 

一 單頁門檻高，體驗好二 移動架構，輕為王道三 mvc業務架構最好自造四 模組化（requireJS）必不可少五 冗餘是最佳化的敵人，無論網站速度還是代碼維護六 css解耦乃長遠之計七 零請求無流量是最佳化的最終手段八 速度最佳化緩衝為王九 Hybrid帶來移動革命，與native保持介面調用即可

 4 移動前端不得不瞭解的html5 head 頭標籤

 5 MobileWeb 適配總結

 

 6 移動端開發所需要的一些資源與小技巧

 

 

 

 

移動開發學習筆記