memo.xight.org

日々のメモ

iPhone 用 Webページの cheatsheet

Summary

iPhoneの表示画面、ズームの許可、禁止などは、metaタグのviewportでコントロールができる。

viewportの設定一覧

プロパティ 機能
width ビューポートの幅(ピクセル)。デフォルト値は980。範囲は200から10,000まで。下表の定数device-widthでも良い。
height ビューポートの高さ(ピクセル)。デフォルト値は980。範囲は223から10,000まで。下表の定数device-heightでも良い。
initial-scale ビューポートの乗数としての初期スケール。デフォルトはWebページを可視のエリアにフィットさせます。範囲は、minimum-scaleとmaximum-scaleから測定されます。あなたは、Webページが表示される最初ビューポートのスケールだけをセットできます。 user-scalable が noでなければ、その後、ユーザーはズームすることができます。そのズーミングは、 minimum-scale と maximum-scale により制限されます。
minimum-scale ビューポートの最小スケール。デフォルトは、0.25です。範囲は0 から 10.0まで。
maximum-scale ビューポートの最大スケール。範囲は0 から 10.0まで。
user-scalable ユーザーが拡大・縮小することができるかどうかをyes/noで指定します。

定数 機能
device-width 装置の幅(ピクセル)。 iPhone 1.1.1以降で使えます。
device-height 装置の高さ(ピクセル)。 iPhone 1.1.1以降で使えます。

viewport の 指定を <head> 内に記述する例

<meta name="viewport" content="width=device-width; initial-scale=1.0;">


ホーム画面に登録する際のアイコン指定

http://example.com/apple-touch-icon.png を利用する場合
<link rel="apple-touch-icon" />


アイコンのパスを指定する
<link rel="apple-touch-icon" href="/path/to/apple-touch-icon.png" />


起動画面を表示する

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


GPSの利用

navigator.geolocation.watchPosition(function(location){
	do_something(location.coords.latitude, location.coords.longitude);
});


HTML5 ApplicationCache を利用する

<html manifest="/path/to/iphone.manifest">


manifestファイルの内容

CACHE MANIFEST
/path/to/css/cssfile.css
/path/to/images/title.png

cacheのアップデートを確認

cache = window.applicationCache;
if (window.applicationCache.status == window.applicationCache.UPDATEREADY){
    window.applicationCache.update();
    window.applicationCache.swapCache();
}


cacheの検出
cache = window.applicationCache;
cache.addEventListener('updateready', cacheUpdatereadyListener, false);
cache.addEventListener('error', cacheErrorListener, false);


.manifestファイルは text/cache-manifest で返す必要がある。
Apache なら以下のような記述が必要。

AddType text/cache-manifest .manifest

Safariのタスクバーを表示しない。

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


UserAgent

iPhoneのUserAgent
Mozilla/5.0 (iPhone; U; CPU like Mac OS X; en) AppleWebKit/420+ (KHTML,like Gecko) Version/3.0 Mobile/1A543a Safari/419.3

iPodTouchのUserAgent
Mozilla/5.0 (iPod; U; CPU like Mac OS X; en) AppleWebKit/420.1 (KHTML,like Gecko) Version/3.0 Mobile/3A100a Safari/419.3

Reference

iPhone 3G用のWebページを作る1 - [JavaScript]All About
http://allabout.co.jp/internet/javascript/closeup/CU20080715A/index3.htm

HTML5で作るiPhoneアプリケーション
http://www.slideshare.net/mogya/html5iphone

Geolocation の利用 - MDC
https://developer.mozilla.org/ja/Using_geolocation

Ajaxian - navigator.geolocation: Using the W3C Geolocation API today
http://ajaxian.com/archives/navigatorgeolocation-using-the-w3c-geolocation-api-today

Safari Dev Center - Apple Developer Connection
http://developer.apple.com/safari/#//apple_ref/doc/uid/TP40002051-CH4-SW1

ApplicationCache - iPhone 3G DevWiki
http://wiki.sohaya.com/index.php/ApplicationCache

via

たつおのChangeLog - 2009-09-08 - iPhone 対応ウェブページにするおまじない
http://chalow.net/2009-09-08-2.html