iPhon,iPadは革新的なデバイスとして注目されていて、GoogleのAndroidをはじめ各社iPhoneライクなデバイスを発表しています。それほどモバイル業界のビッグウェーブだったのですね。今後WEBサイトを作る際、iPhoneやiPadへの対応を視野に入れて置かなければならない様です。
そこで、iPhoneやiPad用に対応するサイトを作る為のコードスニペットを紹介します。

コードスニペット

1,iPhone/iPadをjavascriptで検出してリダイレクトさせる

javascriptで専用ページにリダイレクトさせる

CODE

if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i))) {
    if (document.cookie.indexOf("iphone_redirect=false") == -1) {
        window.location = "http://m.espn.go.com/wireless/?iphone&i=COMR";
    }
}

Source: http://davidwalsh.name/detect-iphone

2,iPhone/iPadをPHPで検出してリダイレクトさせる

phpで専用ページにリダイレクトさせる

CODE

if(strstr($_SERVER['HTTP_USER_AGENT'],'iPhone') || strstr($_SERVER['HTTP_USER_AGENT'],'iPod')) {
    header('Location: http://yoursite.com/iphone');
    exit();
}

Source: http://davidwalsh.name/detect-iphone

3,ビューポートでデバイスの画面幅を設定する

viewportはMobile Safariでデバイスの画面幅（device-width）で描写してくれるタグで、iPhoneなら320ピクセルでページを展開します。

CODE

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

Source: http://www.engageinteractive.co.uk/blog/2008/06/19/tutorial-building-a-website-for-the-iphone/

4,iPhone用のアイコン指定

ユーザーがホーム画面にページを追加すると、iPhoneが自動的にアイコンとしてウェブサイトのスクリーンショットを使用してしまいますので、
どうせなら独自のかっこいいアイコンを提供しましょう。

CODE

<rel="apple-touch-icon" href="images/template/engage.png"/>

Source: http://www.engageinteractive.co.uk/blog/2008/06/19/tutorial-building-a-website-for-the-iphone/

5, 回転させた時のテキストサイズを調整する

iPhoneを回転させたとき、Safariはテキストのサイズを調整します。
もしこの効果を防ぎたいときは単純に次のCSSを宣言しちゃいましょう。

CODE

html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6 {
    -webkit-text-size-adjust:none;
}

Source: http://www.engageinteractive.co.uk/blog/2008/06/19/tutorial-building-a-website-for-the-iphone/

6,iPhoneの向きを検出する

iPhoneは、縦でも横でも表示できるので、どのモードでドキュメントが読み込まれているか検出する必要があります。
javascriptを利用してCSSでクラス指定して制御します。
最後の行の”page_wrapper”は、classですのでお好きなクラス名に変えてください。

CODE

window.onload = function initialLoad() {
    updateOrientation();
}

function updateOrientation(){
    var contentType = "show_";
    switch(window.orientation){
        case 0:
	contentType += "normal";
	break;

	case -90:
	contentType += "right";
	break;

	case 90:
	contentType += "left";
	break;

	case 180:
	contentType += "flipped";
	break;
    }
    document.getElementById("page_wrapper").setAttribute("class", contentType);
}

Source: http://www.engageinteractive.co.uk/blog/2008/06/19/tutorial-building-a-website-for-the-iphone/

7,iPhoneだけのCSSを指定する

文字通りiPhone用のCSSを宣言

CODE

@media screen and (max-device-width: 480px){
    /* All iPhone only CSS goes here */
}

Source: http://csswizardry.com/2010/01/iphone-css-tips-for-building-iphone-websites/

8,iPhone用に自動で画像をリサイズさせる

デバイスのwidthが480pxなら、画像は100%で変換されます。

CODE

@media screen and (max-device-width: 480px){
    img{
        max-width:100%;
        height:auto;
    }
}

Source: http://csswizardry.com/2010/01/iphone-css-tips-for-building-iphone-websites/

9,デフォルトのツールバーを非表示にする

iPhoneの画面のような小さな画面では、ツールバーは多くのスペースを浪費します（便利ですけどね）
safariのツールバーをjavascriptで非表示にします。

CODE

window.addEventListener('load', function() {
    setTimeout(scrollTo, 0, 0, 1);
}, false);

Source: http://articles.sitepoint.com/article/iphone-development-12-tips/2

10, 電話番号やsmsをリンクとして表示させる

スマートフォンには必須です。だってモバイル機ですから、電話番号やsmsなど直接コンタクト取る手段は表示するべきだよね？

CODE

<a href="tel:12345678900">Call me</a>
<a href="sms:12345678900">Send me a text</a>

Source: http://articles.sitepoint.com/article/iphone-development-12-tips/3

11,iphoneで疑似クラス:hoverを利用する

iphoneは:hoverなどの疑似クラスを使用できないようなので（ちょっと自信ないですが）、javascriptで利用できるようにします。

CODE

var myLinks = document.getElementsByTagName('a');
for(var i = 0; i < myLinks.length; i++){
   myLinks[i].addEventListener('touchstart', function(){this.className = "hover";}, false);
   myLinks[i].addEventListener('touchend', function(){this.className = "";}, false);
}

んで、CSSは…

a:hover, a.hover {
    /* whatever your hover effect is */
}

Source: http://www.evotech.net/blog/2008/12/hover-pseudoclass-for-the-iphone/

間違っとったらゴメンね〜。その時はこっそり教えてください。