@@ -108,9 +108,9 @@
     -webkit-tap-highlight-color: rgba(160,160,160,0.70);
 }
 }}}
 
-  * ホーム画面のアイコンから起動されたかどうかを検知: Google Buzzや、リニューアルしたiPhoneむけYahoo! Japanでは、Safariでアクセスしたとき「キミもこのページをアイコンとしてホーム画面に置かないかい?」という誘導がでる。もちろんこの誘導はホーム画面のアイコンから起動したときは出ない。つまりホーム画面のアイコンから起動したかどうかの検出が必要。それはこう書けばできる
+  * ホーム画面のアイコンから起動されたかどうかを検知: Google Buzzや、リニューアルしたiPhoneむけYahoo! Japanでは、Safariでアクセスしたとき「キミもこのページをアイコンとしてホーム画面に置かないかい?」という誘導がでる。もちろんこの誘導はホーム画面のアイコンから起動したときは出ない。つまりホーム画面のアイコンから起動したかどうかの検出が必要。それはこう書けばできる。ちなみにホーム画面のアイコンから起動したSafariのインスタンスはURL表示がなくなってしまう。
 {{{
 〜




に以下を入れておいて、
  
 }}}

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

@@ -129,4 +129,6 @@
 body {
     -webkit-transform-style: preserve-3d;
 }
 }}}
+
+ * 動的なWebサイトなど、同一URLで多様なコンテンツを提供するサイトの場合、Safariのブラウザバックで前の画面に戻ったとき、 の value が前の画面のままになっていることがある。たとえば foo.cgiで  で同じく foo.cgi にPOSTで遷移して、遷移先の foo.cgi に  が含まれていた場合、ブラウザバックすると「投稿する」ボタンが現れるべきだが「取り消す」ボタンとして見えてしまう。

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

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

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

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

@@ -98,8 +98,16 @@
 }}}
 {{{
 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でアクセスしたとき「キミもこのページをアイコンとしてホーム画面に置かないかい?」という誘導がでる。もちろんこの誘導はホーム画面のアイコンから起動したときは出ない。つまりホーム画面のアイコンから起動したかどうかの検出が必要。それはこう書けばできる

@@ -99,6 +99,21 @@
 {{{
 a:hover, a.hover {
     /* whatever your hover effect is */
 }
+}}}
+
+  * ホーム画面のアイコンから起動されたかどうかを検知: Google Buzzや、リニューアルしたiPhoneむけYahoo! Japanでは、Safariでアクセスしたとき「キミもこのページをアイコンとしてホーム画面に置かないかい?」という誘導がでる。もちろんこの誘導はホーム画面のアイコンから起動したときは出ない。つまりホーム画面のアイコンから起動したかどうかの検出が必要。それはこう書けばできる
+{{{
+〜に以下を入れておいて、
+ 
+}}}
+{{{
+   
 }}}
 

@@ -12,4 +12,93 @@
 
  * 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
+{{{
+
+}}}
+  * Insert an iPhone specific icon
+{{{
+
+}}}
+  * 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リンク
+{{{
+Send me a text
+}}}
+  * 「: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 */
+}
+}}}
+