iPhone/iPod touchむけメモ

iPhone は、電話番号のように見える番号を自動的に検知し、ユーザーがその番号をタップして電話を掛けられるようにしています (iPod の場合、このような自動検知は行いません)。ページ上でこの機能をオフにするには、<meta name = "format-detection" content = "telephone=no">というメタタグを使用します。この機能をオフにした場合、電話番号を<a href="tel:555-1234">555-1234</a>という形式の HTML リンクに変換することで、該当する電話番号を明示的に識別することができます。

Google Maps のページにリンクすると、Mobile Safari が終了して Google Maps アプリケーションが起動されます。同様に、YouTube ページにリンクすると YouTube アプリケーションが起動されます。

JavaScript 関数の alert、confirm、prompt は iPhone で有効に機能しますが、showModalDialog は機能しません。iUIでは、dialog という CSS クラスがダイアログの振る舞いを模倣して、画面最前面のオーバーレイとして機能します。

現時点では、Flash、Java™ アプリケーション、WML (Wireless Markup Language)、SVG (Scalable Vector Graphics)、XSLT (Extensible Stylesheet Language Transformation) はいずれも Mobile Safari ブラウザーで機能しません。ファイルのアップロードとダウンロードはサポートされていませんが、iPhone ファームウェアの 2.0 バージョンでは違ってくる可能性があります。マウスオーバー・イベント、ツールチップ、およびホバー・スタイルも同じく機能しません。

GIF (Graphics Interchange Format)、PNG (Portable Network Graphics)、TIFF (Tagged Image File Format) の画像は、デコードしたときに 2 メガピクセル以下でなければなりません。2 メガピクセルを超える JPEG 画像はサブサンプリングされて小さくなるので、最大 32 メガピクセルが限度です。個々のテキスト・ファイルやメディア・ファイルは、10 MB 未満でなければなりません。

iPhone と iPod touch ではどちらも、ユーザーが特定の Web アプリケーションを表すアイコンをホーム画面に配置することができます。アプリケーションにカスタム・アイコンを指定するには、PNG ファイルを /apple-touch-icon.png に配置します。アイコンは、角が直角の 57 x 57 ピクセルにする必要があります。ネイティブ・アイコンが使用する光沢は含めないようにしてください。iPhone または iPod-touch のオペレーティング・システムが、自動的に角を丸くして光沢エフェクトを追加します。

http://www.catswhocode.com/blog/10-useful-code-snippets-to-develop-iphone-friendly-websites

iPhoneとiPodをJavaScriptで判定

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

Set iPhone width as the viewport

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

Insert an iPhone specific icon

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

Prevent Safari from adjusting text size on rotate

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

Detect iPhone orientation

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

Apply CSS styles to iPhones/iPods only

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

Automatically re-size images for iPhones

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

Hide toolbar by default

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

SMSリンク

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

「:hover」もどき: iPhoneはマウスないけど、こうすれば指先がリンクに乗ったら色が変わるとかできる

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 {
    /* whatever your hover effect is */
}

上記では:hoverをエミュレートしてリンクの色を変える方法を紹介してるが、iPhoneだけを考えるなら、タップされたところをハイライトするようなCSS attributeが用意されているので、それを使ったほうがいい
```
* {
    -webkit-tap-highlight-color: rgba(160,160,160,0.70);
}
```

ホーム画面のアイコンから起動されたかどうかを検知: Google Buzzや、リニューアルしたiPhoneむけYahoo! Japanでは、Safariでアクセスしたとき「キミもこのページをアイコンとしてホーム画面に置かないかい?」という誘導がでる。もちろんこの誘導はホーム画面のアイコンから起動したときは出ない。つまりホーム画面のアイコンから起動したかどうかの検出が必要。それはこう書けばできる。ちなみにホーム画面のアイコンから起動したSafariのインスタンスはURL表示がなくなってしまう。
```
<head>〜</head>に以下を入れておいて、
<meta name="apple-mobile-web-app-capable" content="yes" /> 
```
```
  <script language="JavaScript"> 
  if(window.navigator.standalone){
	document.write('ホーム画面のアイコン経由だね');
  }else{
	document.write('普通にSafariでアクセスしたね');
  }
  </script> 
```

iPhoneを含むWebKit系のブラウザでは CSS アニメーションがサポートされていて便利なのではあるが、iPhoneの場合は3D系のアニメーションとフォームの入力動作と相性がわるいようなので、ユーザビリティを考慮した場合利用には若干の注意が必要。具体的には、3D系アニメーションを利用するために以下のようなエントリをCSSに追加すると、このようなアトリビュートが有効になったページにあるインプットフォームへの入力は体感でわかる程度にレスポンスがわるくなる。
```
body {
    -webkit-transform-style: preserve-3d;
}
```

動的なWebサイトなど、同一URLで多様なコンテンツを提供するサイトの場合、Safariのブラウザバックで前の画面に戻ったとき、<input type='submit'> の value が前の画面のままになっていることがある。たとえば foo.cgiで <input type='submit' value='投稿する'> で同じく foo.cgi にPOSTで遷移して、遷移先の foo.cgi に <input type='submit' value='取り消す'> が含まれていた場合、ブラウザバックすると「投稿する」ボタンが現れるべきだが「取り消す」ボタンとして見えてしまう。
25KB以上のファイルはキャッシュされない

keitairc
Fork

Recent Changes

2011-01-05

2009-09-25

2009-01-03

Latest File Release

Wiki Guide

Side Bar

iPhone/iPod touchむけメモ

keitairc Fork

Recent Changes

2011-01-05

2009-09-25

2009-01-03

Latest File Release

Wiki Guide

Side Bar

iPhone/iPod touchむけメモ

keitairc
Fork