iPhoneだけに適用するCSSの書き方を自分メモがてら。

iPhoneだけに適用するCSSの書き方を自分メモがてら。

Photo by Ricky Romero

調べたらどこにでも書いてあることではあるんですが、今回初めてiPhoneだけに適用されるCSS書いてみたので自分メモがてら。下記のように記述することで、CSSがiPhoneに適用されます。

@media screen and (max-device-width: 480px) {
(ここにiPhoneだけに適用したいCSSを書く)
}

例)
@media screen and (max-device-width: 480px) {
.content p { line-height:1.3; font-size:13px; }
}

line-heightとかfont-sizeとか微妙にPCでの表示とずれるようで、そのあたりをちょこちょこ修正したい場合には便利です。そもそも全体の表示変えてしまうのであれば、読み込むCSSファイルをそもそも違うものにする方法もあるようです。そちらはまた別途。

Androidでの場合とかも含めると、スマホ対応する上でもっと気にしなきゃいけないことや、やり方があるとは思うんですが、サクっとiPhoneでの表示を修正したい場合はこんな感じで良いのではないでしょうか。まあご参考までに。


このブログに掲載されている写真は2013/05/24以降はRICOH GR、それ以前はRICOH GR DIGITAL IIIで撮影されています。


カテゴリ : BLOG CSS IPHONE WEBこのブログをRSSで購読する