HOME   TIPS   iPhone4で画像を綺麗に表示させる方法

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]-->

 

 

̃Gg[͂ĂȃubN}[Nɒlj
Õy[W֖߂