iOS移動前端開發總結

標籤：android   style   blog   http   io   ar   os   使用   sp   

iOS移動前端也可以說是iPhone移動前端，做過才知道有一些坑，記錄下來，以便下次不會遺忘，希望這篇文章能夠幫到正在做iPhone手機移動前端的你。當然有一些內容也適用在Android上，如果你發現有錯誤的地方或者有更好的技巧，歡迎留言告知我。

一：輸入框點擊之後頁面會放大

iPhone的一個坑，當你的頁面有表單，需要填寫內容時，聚焦後，發現頁面會放大，這可能導致一些設計變形，例如超出內容出現橫向捲軸。

解決方案：很簡單，不讓使用者放大頁面的操作，添加以下的meta即可。

<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no;"/>

user-scalable=no表示不允許使用者點擊螢幕放大瀏覽；

二：遮罩點擊顯示後不會全螢幕顯示，需要滑動以下才會全屏

Android不會出現上面這種情況，ios因為元素剛開始不可見，點擊顯示後無法填充全屏，所以記得給遮罩的背景添加一個高度為window的高度，bug可以在Bootstrap的issue裡面發現：https://github.com/angular-ui/bootstrap/issues/1812

var winHeight= $(window).height();  $(".modal-backdrop").css("height",winHeight);

三：不讓使用者放大圖片和文字

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

maximum-scale=1阻止使用者縮放，比例為1:1

四：重設按鈕樣式

iOS預設會給按鈕加按鈕button加一個iOS的樣式，你需要在裡面加上

button,input[type="button"]{-webkit-appearance:none;*overflow:visible;}

其他使用於iOS移動前端的技巧

一：JavaScript提示使用者添加到主畫面

http://caibaojian.com/add-to-home-screen.html

之前的一篇關於iPhone可以添加到主畫面，從而通過手機案頭像開啟APP一樣開啟網頁，這對於比較依賴移動前端的網頁比較適合，如果是開啟一兩次的話，添加這個提示不免就有點擾亂使用者了，所以可以根據需要來添加。

二：設定 Web Applications

1.設定將網頁儲存為 home screen icon 的圖片路徑，預設值為 57×57

<link rel="apple-touch-icon" href="/custom_icon.png"/>

2.定義其他裝置 size 圖片

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

3.設定載入頁面時 loading 圖片

<link rel="apple-touch-startup-image" href="/startup.png">

4.隱藏底部 iPhone button bar，看起來更像 iPhone App

<meta name="apple-mobile-web-app-capable" content="yes">

5.更改 status bar 樣式

<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">

6.當網頁載入完成後，可以隱藏 URL bar，具體可以參考：在手機上隱藏地址工具列

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

如果旋轉裝置，則必須在加上 resize event

// jQuery resize event$(window).resize(function() {window.scrollTo(0, 1);});7.如果不想讓使用者滑動網頁，可以加入底下

document.addEventListener("touchmove", function(event){event.preventDefault();}, false);

連結推薦：

http://code.tutsplus.com/

https://developer.apple.com/library/

http://blog.wu-boy.com/

來拿起高大上的蘋果掃描看看我做過的一個頁面：

iOS移動前端開發總結