07/31
2010
2010
備忘録：ipad iphoneだけに効かせるCSS対応
最近Web制作をしていると、ipad、iphoneで見ると、画像が1pxずれてしまうことに悩んでいました。
画像単体なら、調整も聞くんですが、切り分けしてあるところなどでは、1pxのずれは結構汚く見えてしまうので、 どうしたものかと。
CSSハックも検索しても今のところ書かれてあるサイトはないんですよねー。
で、探していたら、cssファイルをipad用、iphone用とわけてあげることで、対応できることがわかりました。
◆iphoneには ＜link rel="stylesheet" media="only screen and (max-device-width: 480px)" href="iphone.css" type="text/css" /＞
◆ipadには ＜link rel="stylesheet" media="only screen and (max-device-width: 1024px)" href="ipad.css" type="text/css" /＞
上記＜＞が全角になっているので、半角にしてくださいね。
あとは、直したい箇所のCSSをそれぞれのスタイルシートに書き出せばOKです。
Comment
はじめまして。
ちょっと見ていて気になったのでコメントさせていただきました。
iPadとiPhoneの指定って逆じゃないですかね？
iPadのmax-device-widthが480pxってことはないと思うので・・。
＞えどさん
ほんとですね、おもいっきり逆になってましたね（笑）
失礼しました。
修正させてもらいました。
ご指摘ありがとうございます。