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
