132

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

私の現在のメディアクエリは次のとおりです。

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

11 に答える 11

287

もう 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 プラス:
@media screen and (device-aspect-ratio: 16/9) {}

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

参考：
Media Queries @ W3C
iPhoneモデル比較
アスペクト比計算機

于 2012-10-11T20:44:40.153 に答える
65

これがあります。これは、このブログの功績によるものです。

@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 の 1 つの寸法 (奇妙なディスプレイ ピクセルの異常により 560px) と 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 */
}
于 2012-09-22T02:15:41.133 に答える
39

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

このクエリは、画面が小さいすべてのデバイスで機能し、おそらくデザインが壊れます。

同様のデバイス固有のメディアクエリ（HTC、Samsung、IPod、Nexus ...）と組み合わせると、この方法で時限爆弾が発生します。デビッグの場合、このアイデアにより、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ページのレンダリングが高速化されます。

于 2013-01-16T17:35:00.687 に答える
8

私にとって、その仕事をしたクエリは次のとおりでした。

only screen and (device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)
于 2012-12-10T13:43:34.457 に答える
8

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*/

}
于 2014-07-23T12:23:15.233 に答える
5

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

次のリンクポイントとして、以下の解決策が機能します。

@media screen and (device-height: 568px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 2) {
    // css here
}
于 2012-12-07T10:21:26.633 に答える
5

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

<meta name="viewport" content="initial-scale=1.0">
于 2013-12-02T11:48:08.700 に答える
3

モバイルデバイス用のメディア機能データベースで、iPhone5と他のスマートフォンの答えをかなり簡単に得ることができます。

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

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

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

于 2012-10-23T13:55:10.633 に答える
0

afaiknoiPhoneは1.5のピクセル比を使用します

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

于 2013-03-14T11:16:11.080 に答える
-3

すべての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 */
}
于 2012-09-30T00:54:39.710 に答える