iphone - iPhone 4 Retina 画像が CSS で適切にサイズ変更されない

Question

モバイル サイト用の画像を保存しようとしています。iPhone 4 用にハイレゾ (幅 640px) と低解像度 (幅 320px) を保存しています。Safari モバイルで jpg 画像を表示すると、全幅 (ポートレート モード) が表示されます。CSS で背景画像として使用すると、画面の約 2/3 を占めます (ポートレート モード)。

このコードを使用して網膜スクリーンを検出しています

@media
only screen and (-webkit-min-device-pixel-ratio : 1.5) and (orientation:portrait),
only screen and (min-device-pixel-ratio : 1.5) and (orientation:portrait) {

#header
{
    background:url(images/hires/header.jpg) no-repeat;
    width:640px;
    height:257px;
}

}

それを修正する唯一のものは次のとおりです。

<meta name="viewport" content="width=640" />

私のHTMLヘッダーに。しかし、それは幅が 540px の Atrix 2 のようなものでは完全に無効になります。私は試しました：

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

そして、画像は画面の幅の約2倍になりました（ポートレートモード）。

私は一生、自分が間違っていることや、すべての電話/解像度/画面サイズに対応する方法を理解することはできません.