移動平臺開發須要的記錄

     我以前在大學的時候一直都是學校PC端的前端開發，如今工做了，還在試用期，導師給了我些練習，此次的練習是頁面在ipad上的展現，趁着這個時候，我以爲要好好記錄一下此次累積的經驗。

　　1. 要求之一是使用iscroll模擬。

　　　可是iscroll是什麼啊？爲此我去google了一番。看了一些入門級的文章，大概瞭解了iscroll的用法。

　　　網上有一大堆用法的介紹：http://www.nb88.net/Index/p/id/406  等等。

　　　其實在移動平臺上我沒有碰到過對於滾動的問題，這個iscroll是解決移動端的滾動問題，我以爲須要在應用中再好好體驗一下。

 

　　2. 移動平臺的meta標籤。

　　　這個meta在移動平臺上有很是神奇的地方。

　　　2.1 <meta name=」viewport」 content=」width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;」 />

　　　　這一句可讓咱們用全屏來佈局咱們的頁面了，不用再擔憂頁面顯示被瀏覽器縮小。

　　　　viewport便可視區域，對於桌面瀏覽器而言，viewport指的就是除去全部工具欄、狀態欄、滾動條等等以後用於看網頁的區域。對於傳統WEB頁面來講，980的寬度在iphone上顯示是很正常的，也是滿屏的，但對於webapp而言，可能就有點問題了，在iphone上咱們的webapp在豎屏下一般寬度都是320，這時咱們320頁面在iphone上顯示成啥效果呢？有人可能認爲iPhone不是320的寬度嗎，感受應該是滿屏的吧，事實呢？屏幕被縮放了，變成在PC上顯示的那樣。

　　　　一些參數：

　　　　width: viewport 的寬度 （範圍從 200 到 10,000 ，默認爲 980 像素 ）
　　　　height: viewport 的高度 （範圍從 223 到 10,000 ）
　　　　initial-scale: 初始的縮放比例 （範圍從>0到 10 ）
　　　　minimum-scale: 容許用戶縮放到的最小比例
　　　　maximum-scale: 容許用戶縮放到的最大比例
　　　　user-scalable: 用戶是否能夠手動縮放

        2.2 <meta name=」format-detection」 content=」telephone=no」 />

　　　　你明明寫的一串數字沒加連接樣式，而iPhone會自動把你這個文字加連接樣式、而且點擊這個數字還會自動撥號！想去掉這個撥號連接該如何操做呢？這時咱們的meta又該大顯神通了，代碼以下：

           telephone=no就禁止了把數字轉化爲撥號連接！
　　　　telephone=yes就開啓了把數字轉化爲撥號連接，要開啓轉化功能，這個meta就不用寫了,在默認是狀況下就是開啓！

        2.3 <meta name=」apple-mobile-web-app-capable」 content=」yes」 />

　　　　這meta的做用就是刪除默認的蘋果工具欄和菜單欄。content有兩個值」yes」和」no」,當咱們須要顯示工具欄和菜單欄時，這個行meta就不用加了，默認就是顯示。

        2.4 <meta name=」apple-mobile-web-app-status-bar-style」 content=」black|default|black-translucent」 />

　　　　做用是控制狀態欄顯示樣式。