網站移動版本開發踩坑實錄四

前戲：暈暈乎乎正在瞌睡中，測試妹紙拿來一個ipad，開着微博，打開了站點說你看，微博自帶瀏覽器點擊放大之後網頁沒有自適應啊（網站因爲有圖片神馬的，全站圖片要自適應各類移動設備），我驚醒，心想我草這是啥功能， 我這種木有ipad的人何時看見過這個功能。

好吧既然出問題了，就開始想一想吧---繼續昏迷10分鐘....

開始：拿着ipad上大概看了一下，當微博打開的時候，其實頁面仍是有一點冗餘的空白寬度，既然作了一個80%（估計）的可視展現區域，可是仍是能有用移動留出空白，而後點擊放大，頁面平鋪這個視窗，第一想法必定是沒調起個人重繪代碼， 可是本身體驗一下那個展現區域，感受也不須要調起來（我從新調整頁面，監聽的是第一頁面旋轉，不然resize）因此resize沒有綁定過事件，既然只是ipad上的微博是這樣，就先確認一下ipad 微博的的useragent吧，看了一下居然吃果果的有 一個 Mozilla/5.0 (iPad; CPU OS 5_1_1 like Mac OS X) AppleWebKit/534.46 (KHTML, like Gecko) Mobile/9B206 iPad1,1__weibo__3.5.1__ipad__os5.1.1吼吼那就是你了

var iPad = navigator.userAgent.toLowerCase().match(/iPad/i);   
var isIpadWeibo = null;
if(iPad) {
    var isIpadWeibo = navigator.userAgent.toLowerCase().match(/_weibo_/i);
}

因此只要判斷是isIpadWeibo 那麼我就把事件綁定一次算了

if(isIpadWeibo) {
    $(window).on('resize', function() {
        //js調整圖片自適應代碼
    }); 
}

問題解決。

 

二、webApp添加到主屏幕的功能 不管是android仍是ios系統中，以chrome爲例 瀏覽器訪問一個網址，能夠將網址加入到主屏幕（即webApp)，變成相似於本地APP的形式打開，能夠隱藏地址欄，只顯示狀態來達到相似本地APP的體驗（pc上也能夠添加到桌面）。 作到這樣只須要在head中加入:

<meta name="apple-mobile-web-app-capable" content="yes"><!-- ios中，webApp功能-->
    <meta name="mobile-web-app-capable" content="yes"><!--chrome檢測的meta -->
    <meta name="apple-mobile-web-app-status-bar-style" content="black"><!-- ios中，狀態條背景色-->
    <link rel="shortcut icon" sizes="144x144" href="/images/logo.png"><!--android及pc系統添加到webApp的icon -->
    <link rel="apple-touch-icon" href="/images/logo.png"><!-- ios系統添加到webApp的icon -->


這樣子在ios和android的平臺下添加到主屏幕之後的webApp就會帶有設置好的icon了，不然就是系統默認設置
具體參見：


http://www.w3cplus.com/mobile/mobile-terminal-refactoring-create-page.html
http://stackoverflow.com/questions/21018750/add-to-homescreen-button-in-android-does-not-show-website-as-a-web-app