blog.Ring.idv.tw

Web Application for iOS

Web Application for iOS


隨著iOS6開始支援更多的HTML5 related APIs和相關規格,如:requestAnimationFrameWeb Audio APIWebSocket (RFC 6455),下述是一些針對iOS平台開發Web Application可參考的相關組態設定:

Viewport Meta Tag

Viewport組態設定可以說是Mobile Web Application最重要的設定之一,因為它是直接用來控制瀏覽器是如何呈現你的網頁內容:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"/>

width=device-width: 表示用來適應各個不同裝置的寬度大小

initial-scale: 1.0 用以初始化的scale

maximum-scale: 1.0 由於初始化的scale為1.0,所以此行等同於讓使用者無法縮放

詳細的設定細節與圖文說明可參考:Configuring the Viewport

Full-Screen Mode

設定Web Application是否採用full-screen mode來運作

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

另一方面,開發者也可以使用JavaScript去取得「window.navigator.standalone」property來判斷目前是否運作在full-screen mode。

Status Bar Appearance

設定狀態列的樣式,分別有「default」、「block」和「black-translucent」可以使用,若採用full-screen mode運作可以採用「black-translucent」

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

Format Detection

由於Safari預設會自動偵測可能的電話格式字串並主動加入連結,所以下述設定可以將此功能關閉

<meta name="format-detection" content="telephone=no">

Webpage Icon for Web Clip

此設定為當Web Application加入主畫面螢幕之後,在螢幕上要呈現的圖示:

<!-- iPhone/iPod -->
<link rel="apple-touch-icon" href="images/touch-icon-iphone.png"/>
<!-- iPad -->
<link rel="apple-touch-icon" sizes="72x72" href="images/touch-icon-ipad.png"/>
<!-- iPhone/iPod Retina -->
<link rel="apple-touch-icon" sizes="114x114" href="images/touch-icon-iphone-retina.png"/>
<!-- iPad Retina -->
<link rel="apple-touch-icon" sizes="144x144" href="images/touch-icon-ipad-retina.png"/>

Startup Image

Web Application啟動後要顯示的初始畫面,預設為320x460 (20px保留狀態列使用)

<link rel="apple-touch-startup-image" href="img/splash-screen-320x460.png">
<!-- iPad Landscape -->
<link rel="apple-touch-startup-image" sizes="1024x748" href="img/splash-screen-1024x748.png" />
<!-- iPad Portrait -->
<link rel="apple-touch-startup-image" sizes="768x1004" href="img/splash-screen-768x1004.png" />
<!-- iPhone Landscape Retina -->
<link rel="apple-touch-startup-image" sizes="960x600" href="img/splash-screen-960x600.png" /> 
<!-- iPhone Portrait Retina -->
<link rel="apple-touch-startup-image" sizes="600x960" href="img/splash-screen-600x960.png" /> 

Add to Home Screen

上圖是iPhone瀏覽Yahoo!行動版首頁所出現的「Add to Home Screen」提示,原本想說自己來寫一個好了~ 後來想想這東西應該有早已有人作出來了,找了一下發現網路上有位Matteo Spinelli作者開發了ADD TO HOME SCREEN元件,有興趣的話可以參考它的作法。

Cancelling Default Touchmove Event

防止使用者移動頁面,直接通知Browser不要執行預設的touchmove事件。

window.onload = function()
{
	document.addEventListener("touchmove", function(e){
		e.preventDefault();
	}, false);
}

參考資源

iPhone 4 Retina “apple-touch-startup-image” for Web-apps

Supported Meta Tags

Configuring Web Applications

2012-06-18 16:42:37

Leave a Comment

Copyright (C) Ching-Shen Chen. All rights reserved.

::: 搜尋 :::

::: 分類 :::

::: Ads :::

::: 最新文章 :::

::: 最新回應 :::

::: 訂閱 :::

Atom feed
Atom Comment

::: 人氣指數 :::

今日人氣:56

累積人氣:3006338


::: 線上人數 :::

counter