【html5移動web開發】關於移動端開發

標籤：android   os   io   使用   ar   art   cti   sp   代碼   

1.Google Analytics分析工具的使用：註冊後頁面中加入Google Analytics的代碼，可以分析出有哪些裝置在訪問網站或者哪些頁面訪問量比較大、

2.Modernizr 可以檢測瀏覽器對html5元素的支援性。可以判斷是否支援localstorage等等

3.html5元素在舊版本的IE瀏覽器下顯示為區塊層級元素   article,aside,nav,section{ display:block;}

4.PC端採用固定式配置與流體布局，而在移動網站中我們始終使用流體布局，它可以使你的網站適應不同的裝置尺寸。  

　比如：豎屏下顯示一列，橫屏下顯示2列（合理利用每個像素）

5.清除html5元素的預設樣式

　article,aside,section……{ margin:0; padding:0;border:0;font-size:100%;font:inherit; vertical-align:baseline;}

6.頁面重設字型大小：-webkit-text-size-adjust:none;

　　　　　　　　　-webkit-text-size-adjust:none;如果在Pc案頭訪問，或者通過其他的非行動裝置的瀏覽器訪問，會導致頁面的縮放功能會被禁用。

　　　　　　　　　IPhone:  html{-webkit-text-size-adjust:100%;} 

　　　　　　　　　微軟  html{-ms-text-size-adjust:100%;}

7.媒介查詢（media query）

　@media screen and (min-width:320px){   }

8.同一個區域網路下，可以使用XAMPP配置移動開發環境（以磁碟為基礎的網站服務），確認電腦和行動裝置是在同一無線網路中。通過IP地址即可以訪問

9.如果你的主要使用者使用iphone和移動版safari,在案頭電腦上測試可以節約很多時間。開啟safari,喜好設定---進階欄---開發---使用者代理程式---Mobile safari 3.1.3-IPhone

10.通過介面表徵圖啟動web應用

　  Retina螢幕採用114*114的表徵圖

　　<link rel=‘apple-touch-icon-precomposed‘ sizes=‘114*114‘ href=‘apple-touch-icon-114*114-precomposed.png‘>

     ipad使用72*72的表徵圖

　　未使用Retina螢幕的的IPhone和Android 2.1以上版本的裝置，使用57*57的表徵圖

　  對於諾基亞塞班的裝置，一個快速鍵表徵圖只是用來告訴行動裝置這個表徵圖的位置。

　　<link rel=‘shortcut icon‘ href=‘img/1/apple-touch-icon.png‘>

 

【html5移動web開發】關於移動端開發