iPhone 5 CSSメディアクエリ

iPhone 5は画面が長く、私のウェブサイトのモバイルビューを捉えていません。iPhone 5の新しいレスポンシブデザインクエリとは何ですか？既存のiPhoneクエリと組み合わせることができますか？

私の現在のメディアクエリはこれです：

@media only screen and (max-device-width: 480px) {}

もう1つの便利なメディア機能はdevice-aspect-ratioです。

iPhone 5には16：9のアスペクト比がないことに注意してください。それは実際には40:71です。

iPhone <5：
@media screen and (device-aspect-ratio: 2/3) {}

iPhone 5：
@media screen and (device-aspect-ratio: 40/71) {}

iphone 6：
@media screen and (device-aspect-ratio: 375/667) {}

iPhone 6 Plus：
@media screen and (device-aspect-ratio: 16/9) {}

iPad：
@media screen and (device-aspect-ratio: 3/4) {}

参照：
メディアクエリ@ W3C
iPhoneモデル比較
アスペクト比計算機

これがあり、私はこのブログを信用しています：

@media only screen and (min-device-width: 560px) and (max-device-width: 1136px) and (-webkit-min-device-pixel-ratio: 2) {
    /* iPhone 5 only */
}

このデバイスにインストールされている特定のiOSバージョンではなく、iPhone 5に反応することに注意してください。

既存のバージョンとマージするには、それらをカンマで区切ることができるはずです。

@media only screen and (max-device-width: 480px), only screen and (min-device-width: 560px) and (max-device-width: 1136px) and (-webkit-min-device-pixel-ratio: 2) {
    /* iPhone only */
}

注：上記のコードはテストしていませんが、@media以前にカンマ区切りのクエリをテストしたことがあり、問題なく動作します。

上記は、Galaxy Nexusなど、同様の比率を共有する他のデバイスにヒットする可能性があることに注意してください。これは、640px（奇妙なディスプレイピクセルの異常のために560px）の1つの寸法と960px（iPhone <5）から1136px（iPhone 5）のいずれかの寸法を持つデバイスのみをターゲットとする追加の方法です。

@media
    only screen and (max-device-width: 1136px) and (min-device-width: 960px) and (max-device-height: 640px) and (min-device-height: 560px),
    only screen and (max-device-height: 1136px) and (min-device-height: 960px) and (max-device-width: 640px) and (min-device-width: 560px) {
    /* iPhone only */
}

メディアクエリを使用する、max-device-widthまたはmax-device-heightメディアクエリに使用する上記のこれらすべての回答は、非常に強力なバグに悩まされています。他の多くの人気のあるモバイルデバイスも対象としています（おそらく望ましくないため、テストされていないか、将来的に市場に出回ります）。

このクエリは、画面が小さいすべてのデバイスで機能し、デザインが壊れる可能性があります。

同様のデバイス固有のメディアクエリ（HTC、Samsung、iPod、Nexusなど）と組み合わせると、この方法は時限爆弾を起動します。debiggingの場合、このアイデアは、CSSを無秩序なスパゲッティにすることができます。すべての可能なデバイスをテストすることはできません。

常にIPhone5のみを対象とする唯一のメディアクエリは次のとおりです。

/* iPhone 5 Retina regardless of IOS version */
@media (device-height : 568px) 
   and (device-width : 320px) 
   and (-webkit-min-device-pixel-ratio: 2)
/* and (orientation : todo: you can add orientation or delete this comment)*/ {
                 /*IPhone 5 only CSS here*/
}

max-widthではなく、正確な幅と高さがここでチェックされることに注意してください。

さて、解決策は何ですか？考えられるすべてのデバイスで見栄えのするWebページを作成する場合、ベストプラクティスはデグラデーションを使用することです

/ *確実に画面の幅のみをチェックしている劣化パターン。これはポートレートからランドスケープに変わります* /

/*css for desktops here*/

@media (max-device-width: 1024px) {
  /*IPad portrait AND netbooks, AND anything with smaller screen*/
  /*make the design flexible if possible */
  /*Structure your code thinking about all devices that go below*/
}
@media (max-device-width: 640px) {
 /*Iphone portrait and smaller*/
}
@media (max-device-width: 540px) {
 /*Smaller and smaller...*/
}
@media (max-device-width: 320px) {
 /*IPhone portrait and smaller. You can probably stop on 320px*/
}

ウェブサイトの訪問者の30％以上がモバイルからアクセスしている場合は、このスキームを上下逆にして、モバイルファーストのアプローチを提供します。min-device-widthその場合に使用します。これにより、モバイルブラウザーでのWebページのレンダリングが高速化されます。

私にとって、仕事をしたクエリは：

only screen and (device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)

縦向きと横向きのiPhone 5

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 568px) {

/* styles*/
}

横向きのiPhone 5

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 568px) 
and (orientation : landscape) { 
/* styles*/

}

縦向きのiPhone 5

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 568px) 
and (orientation : portrait) { 
 /* styles*/

}

phonegappアプリをターゲットにした場合、どの応答も機能しません。

次のリンクポイントとして、以下のソリューションが機能します。

@media screen and (device-height: 568px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 2) {
    // css here
}

私はいくつかのオプションをテストしていて、途中でこれを逃したので、非常に迅速な追加です。ページに以下が含まれていることを確認してください：

<meta name="viewport" content="initial-scale=1.0">

モバイルデバイスのメディア機能データベースで、iPhone5や他のスマートフォンと同じくらい簡単に答えを得ることができます。

http://pieroxy.net/blog/2012/10/18/media_features_of_the_most_common_devices.html

同じWebサイトのテストページで独自のデバイス値を取得することもできます。

（免責事項：これは私のウェブサイトです）

afaik no iPhoneは1.5のピクセル比を使用します

iPhone 3G / 3GS：（-webkit-device-pixel-ratio：1）iPhone 4G / 4GS / 5G：（-webkit-device-pixel-ratio：2）

/* iPad */
@media screen and (min-device-width: 768px) {
    /* ipad-portrait */
    @media screen and (max-width: 896px) { 
        .logo{
            display: none !important;
        }
    }
    /* ipad-landscape */
    @media screen and (min-width: 897px) { 

    }
}
/* iPhone */
@media screen and (max-device-width: 480px) {
    /* iphone-portrait */
    @media screen and (max-width: 400px) { 

    }
    /* iphone-landscape */
    @media screen and (min-width: 401px) { 

    }
}

すべてのiPhoneをキャッチするには、「-webkit-min-device-pixel-ratio」を1.5に下げる必要がありますか？

@media only screen and (max-device-width: 480px), only screen and (min-device-width: 640px) and (max-device-width: 1136px) and (-webkit-min-device-pixel-ratio: 1.5) {
/* iPhone only */
}