画面解像度が2倍になったiPhone 4ですが、3G/3GSと表示を揃えるためか、Safariでは320×480pxの画面を2倍に拡大して表示されるようになっています。そのためにラスター画像は、そのまま表示するとジャギーが発生します。
この解決法として、画像を半分のサイズで表示するとジャギーが発生しません。言い換えると、表示サイズの2倍の解像度の画像を使用します。
例えば幅320pxの画像を「
<img width="160" ...」というようにして表示するとOKです。サンプルコード
<html>
<head>
<meta name="viewport" content="width=device-width,user-scalable=no">
<style>
body {margin: 0;}
</style>
</head>
<body>
<img src="160.png" width="160"><img src="320.png" width="160">
</body>
</html>表示例
 |
| ▲iPod touch 2G（320×480px） |
 |
| ▲iPhone 4（640×960px） |
※左の画像が160pxを原寸表示、右が320pxを半分に縮小表示。
0 件のコメント:
コメントを投稿