移動開發學習筆記

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 移動端開發所須要的一些資源與小技巧