web-dev-qa-db-ja.com

iPhone 5 CSSメディアクエリ

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

私の現在のメディアの質問はこれです：

@media only screen and (max-device-width: 480px) {}
iphonecssresponsive-designmedia-queriesiphone-5
129
Maverick

もう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) {}

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

273
2C-B

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

@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）の寸法を持つデバイスのみをターゲットとする追加の方法ですいくつかの奇妙な表示ピクセルの異常に）と960px（iPhone <5）と1136px（iPhone 5）の間の1つ。

@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 */
}
63
Eric

メディアクエリにmax-device-widthまたはmax-device-heightを使用する上記のすべての回答は、非常に強力なバグに悩まされています。それらはまた、他の多くの一般的なモバイル機器将来は）。

この問い合わせは画面が小さいデバイスならどれでもに対してうまくいくでしょう、そしておそらくあなたのデザインは壊れているでしょう。

同様のデバイス固有のメディアクエリ（HTC、Samsung、iPod、Nexusなど）と組み合わせると、このやり方で時限爆弾が発生します。デバッギングのために、この考えはあなたのCSSを手に負えないspagettiにすることができます。あなたはすべての可能なデバイスをテストすることはできません。

唯一のメディアクエリ常に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ではなくexact widthとheightがここでチェックされることに注意してください。

さて、解決策は何ですか？考えられるすべてのデバイスで見栄えの良い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*/
}

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

33
Dan

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

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

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

}
6
Sudheer

Phonegappアプリをターゲットにした私には、どのような応答も機能しません。

次のように link が示すように、以下の解決策が働きます。

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

私がいくつかのオプションをテストしていて、途中でこれを見逃していたので、ほんの少しの追加。あなたのページがあることを確認してください：

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

IPhone 5と他のスマートフォンの答えは、モバイルデバイスのメディア機能データベースにあるので、かなり簡単に入手できます。

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

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

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

3
pieroxy
/* 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) { 

    }
}
0
Arthur Yakovlev

iPhoneは1.5のピクセル比を使用していません

iPhone 3G/3GS ：（ - ウェブキットデバイスピクセル比：1）iPhone 4G/4GS/5G ：（ - ウェブキットデバイスピクセル比：2）

0
noreabu