iPhone & iPod 向けのWebサイトを作る際に覚えておくと捗るコードスニペットあれこれ

JavaScript:Javascriptを使ってiPhoneとiPodを検出

if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i))) {
    if (document.cookie.indexOf("iphone_redirect=false") == -1) {
        window.location = "http://example.com/";
    }
}

PHP:PHPを使ってiPhoneとiPodを検出

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

HTML:ビューポートの設定。

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

HTML:iPhone固有のアイコンを挿入する。（ホーム画面登録用）

画面を横にしたときにSafariがテキストサイズを変更するのを防ぐ。

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

JavaScript:iPhoneの向きを検出する(この例では、CSSが追加されています)

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);
}

CSS:iPhoneとiPodだけにCSSを適用する

@media screen and (max-device-width: 480px){
    ここに設定を書きます。 
}

CSS:画像のリサイズ幅を480px以下にする。

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

JavaScript:デフォルトではツールバーを非表示にする

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

HTML:SMSと電話のリンク

<a href="tel:12345678900">電話をかける</a>
<a href="sms:12345678900">送信させたいメッセージ</a>

JavaScript:hover擬似クラス

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);
}

上記コードを書いた上で

a:hover, a.hover {
    設定
}