ページ

2008年8月13日

WebページのiPhone対応について調べてみる その2

前回から引き続いてWebページのiPhoneへの対応の仕方です。今回は「Webコンテンツの最適化」をざっと眺めてみます。

CSSの切り替え

最初はCSS3で条件に応じてCSSを使い分ければ,iPhoneに最適化したページが作れると言うものです。CSSはあまり詳しくない(かなり昔の知識のまま止まっている)のですが,screenとかprint以外の条件で切り替えられることは知りませんでした。

条件はscreenでなおかつdevice-width、min-device-width,max-device-widthで切り替えると言うことです。

max-device-width : 480px : iPhone
min-device-width : 481px : 普通のブラウザ

こんな感じで書くらしい


<link media="only screen and (max-device-width: 480px)" href="small-device.css" type= "text/css" rel="stylesheet"/>

<link media="screen and (min-device-width: 481px)" href="large-device.css" type= "text/css" rel="stylesheet"/>

onlyがついているのはCSS3に対応していない古いブラウザには無視してもらえるそうです。外部CSSファイルがおけないbloggerとかだと,次のようにテンプレートの中に書けばいいらしい。

@media screen and (min-device-width: 481px) { ... }
ユーザエージェント

ユーザエージェントは決まり事がいろいろありますが,「Mobile.*Safari」にマッチすればOK。えっ。はしょり過ぎ?

WebページのIcon

faviconのiPhone/touch版ですね。apple-touch-icon.pngをトップにおいておけばいいらしい。サイズが書いていないんだけど,縦横32pxぐらいでいいのか?

<link rel="apple-touch-icon" href="/custom_icon.png"/>
って書いておけばページごとにアイコンを切り替えられる。

と言うことで,のこりはまた今度。

0 件のコメント: