iPhone4で画像を綺麗に表示させる方法
iPhone4は、RetinaディスプレイなのでiPhone3G と比べると解像度が2倍になっています。
ですので、解像度を2倍にして作成した画像を1/2に縮小して表示することでくっきりと表示させることができます。
例えば、100px×100pxの画像を綺麗に表示させるには、200px×200pxで画像を作成し、css等で100px×100pxに縮小します。
スマートフォンサイトで、背景に指定した画像を綺麗に表示させる
これを、imgタグではなく、background(背景画像)に適用させるためには、css3から追加になったプロパティであるbackground-size と Media Queriesを使用します。
Media Queriesは、css2のMedia Typeの拡張で、これを使用することで、スマートフォン、タブレット、PCブラウザ等、スクリーンサイズ、解像度によってスタイルシートの割り振りを指定できるようになります。
Media Query とは
http://d.hatena.ne.jp/amachang/20080425/1209139140
スマートフォン、タブレット、PCブラウザ全てに対応させたデザインは、「レスポンシヴレイアウト」と呼ばれ、 WordPressテーマもレスポンシヴテーマが色々出ています。
http://inspirationfeed.com/wordpress/themes-wordpress/15-best-responsive-premium-wordpress-themes-2/
風俗サイトでは、レスポンシヴレイアウトの導入は難しいかもしれませんが、CASTPRO4テーマでは、近いうちにレスポンシヴテーマにも挑戦したいと思います。
@media only screen and (-webkit-min-device-pixel-ratio : 2),only screen and (min-device-pixel-ratio : 2){ #logo{ background: url(images/***.png) no-repeat 0 0; -webkit-background-size:100px 100px; background-size: 100px 100px; } }
これで、2倍の解像度で作成した画像を指定した背景画像も、iPhone4のRetinaディスプレイで綺麗に表示することができます。
devicePixelRatioというプロパティは、iPhone4では2になっています。
IEへの適用方法
モダンじゃない糞ブラウザIEはcss3が使用できませんが、Googleコードで公開されている、css3-mediaqueries.jsを使えばIEでもmedia queriesが使えるようになります。
<!--[if lt IE 9]> <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"> </script> <![endif]-->