January 11, 2012

iPhone でウェブページをアプリっぽく表示する

何か作ろうと思って、ちょっと調べたのでメモ。

参考:

meta タグ

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

ページのサイズや拡大縮小できるかを指定。

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

フルスクリーンモードにするかどうかと、ステータスバーのスタイル。

アイコン

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

3G、iPad、4 (retina)それぞれ別に指定できる。ファイル名に “precomposed” と付けると、光沢処理がされない (例: apple-touch-icon-precomposed.png)

アドレスバーを隠す

function hideAddressBar(){
    setTimeout(scrollTo(0,1),500);
};

$(document).ready(function(){ hideAddressBar(); });
$("body").bind("orientationchange", hideAddressBar);

JavaScriptでスクロールさせる。

height 100% の box を作る

HTML:

<!DOCTYPE HTML>
<html lang="ja-JP">
<head>
    <meta charset="UTF-8">
    <title>test</title>
</head>
<body>
<div id="container">
</div>
</body>
</html>

CSS:

* {
    margin: 0;
    padding: 0;
}

html {
    height: 100%;
}

body {
    height: 100%;
}

#container {
    height: 100%;
    min-height: 100%;
}