私には次の2つのルールがあります。
<link rel="stylesheet" media="screen and (max-width:960px)" type="text/css" href="css/mobileStyles.css">
<link rel="stylesheet" media="screen and (max-width:640px)" type="text/css" href="css/mobilePortraitStyles.css">
これらは私のブラウザで動作しますが（ブラウザの幅を調整すると）、iPhoneで縦向きでも横向きでも確認すると、両方のスタイルシートが読み込まれます。
なぜ横向きで640pxのスタイルシートをロードするのですか？
iPhone Safari ブラウザーの Web ビューのサイズは、どちらの表示タイプでも横向きで 320x480px または 480x320px です。そのため、Web 開発者は非 Retina ディスプレイや Retina ディスプレイ用に CSS のサイズを変更する必要はありません。
Retina ディスプレイのみを対象とする場合
<link rel="stylesheet" media="only screen and (-webkit-min-device-pixel-ratio: 2)" type="text/css" href="../iphone4.css" />
あなたの場合、2 番目のスタイル シートが読み込まれます。これは、どちらの場合も (320 または 480px)、Web ビューが 640px 未満であるためです。
あなたのケースでは、向きをCSSメディアクエリとして使用することをお勧めします。
max-device-width代わりに書くmax-width
<link rel="stylesheet" media="screen and (max-device-width:960px)" type="text/css" href="css/mobileStyles.css">
<link rel="stylesheet" media="screen and (max-device-width:640px)" type="text/css" href="css/mobilePortraitStyles.css">
また、次のように定義するとよいでしょうorientation。
<link rel="stylesheet" media="screen and (orientation:portrait)" href="portrait.css">
<link rel="stylesheet" media="screen and (orientation:landscape)" href="landscape.css">
headこれをHTML ドキュメントの に追加します。
<meta name="viewport" content="width=device-width, initial-scale=1"/>