iPhone4から画面の解像度が高くなり、2倍のサイズで画像を作って、タグやスタイルで1/2のサイズを指定すればキレイになる方法がありますね。例えば、100x100の画像を表示するのに、元サイズは200x200で作って、imgタグでは、height=“100” width=“100”とかにする方法です。

では、CSSのbackground-imageの画像も、2倍のサイズの画像を1/2にすることができるのか。CSS3から増えたbackground-sizeというプロパティを使えば背景画像のリサイズが可能になりました。repeatする小さい画像でも2倍サイズで作り、iPhone4、iPhone4以下でも綺麗に表示することができます。

ところがこのbackground-sizeでサイズ指定した背景画像が、XPERIAで指定することができませんでした。Android OS 1.6というのも原因なのか。Galaxy Android OS 2.2では正しくサイズ指定して表示することが出来ました。

そして端末依存かOS依存の問題かと思いましたが、プロパティの書き方に-webkit-を追加すれば、XPELIAでもサイズ指定できる事がわかりました。多くの参考サイトがbackground-sizeのままでしたが、本当は、-webkit-background-sizeと書いたほうがよさそうですね。もちろんCSS3なのでモダンブラウザしか対応してませんのであしからず。

css
1
2
3
4
5
6
7
8
9
10
11
12
/* 間違ってはないけど、効かないプロパティ */
selector{
  background-size: 100px 100px;
}
 
/* 正しいプロパティ */
selector{
  -webkit-background-size: 100px 100px;
  -moz-background-size: 100px 100px;
  -o-background-size: 100px 100px;
  -ms-background-size: 100px 100px;
}