Web サイトに 2px X 4px の背景画像があり、X と Y で繰り返されます。
iPadで見ると背景が縮んだり、ゴツゴツしたりしてます。iPadで2px X 4pxを明確に保ち、達成するにはどうすればよいですか? みんなありがとう。
ぼやけは、iPad Retina ディスプレイが小さな背景画像を拡大しようとしていることが原因である可能性が最も高いです。同じことが iPhone 4 と iPhone 3 で発生し、新しい Android デバイスでも発生します。これを修正するには、CSS で次のコードを使用します。元の背景として 2px x 4px の画像と、倍の解像度 (4px x 8px) の同じ画像が必要です。このクエリを使用すると、@2x バージョンのイメージのサイズを変更してから、css で@media
目的のサイズに「縮小」することができます。background-size: 4px;
body {
background: url(test-image.png) repeat;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (-moz-min-device-pixel-ratio: 2),
only screen and (-o-min-device-pixel-ratio: 2/1),
only screen and (min-device-pixel-ratio: 2) {
body {background: url(test-image@2x.png) repeat; background-size: 4px;}
}
このスニペットを iPad の網膜でテストしたところ、ぼやけが修正されました。ご不明な点がございましたら、お気軽にお問い合わせください。
わかりましたこれは私がしたことです。
ビューポートをに設定
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
画像の問題を修正しました。しかし、ズームインとズームアウトはもうできません。しかし、このプロジェクトには必要ありません。:) 助けてくれてありがとう