いわゆる「iPhone対応」です。

当サイト「R-STYLES.NET」に、iPhone用のmetaやlink、CSSを追加しました。

具体的には以下の2点。

  1. まず、次のコードをhead要素に追加しました。

    • <meta name="viewport" content="width=device-width" />
    • <meta name="apple-mobile-web-app-capable" content="YES">
    • <link rel="apple-touc/h-icon" href="http://r-styles.net/images/r_logo.png">

  2. 次に、CSSに以下のようなコードで「iPhone/iPod touchのようなデバイス」に対してのみCSSを読み込ませるように指定を追加しました。

    • @import "http://r-styles.net/mt-themes/trinity/css/iphone.css" screen and (max-device-height:480px) and (min-device-height:320px) and (max-device-width:480px) and (min-device-width:320px);

あとは、iphone.cssで「iPhone/iPod touchのようなデバイス」用にプロパティを上書きしていくだけです。大した事はしていません。

iPhoneっぽいUIも考えていましたが、よく考えるとそこまでする必要もないかな、と。というより、別に標準のiPhoneUIはカッコ良いとは思わないので、サイトの雰囲気重視で、一応拡大や傾きにも対応した感じです。

百聞は一見にしかず。興味のある方はiPhone, iPod touchで見てみてください。