Media Css for Iphone6＆Iphone6 plus

Question

私はこのウェブサイトを作っています&私はモバイル、タブレット、ラップトップ、デスクトップ用のメディア設定を行いました。それは他のすべての携帯電話でよく見えました。実際のタブレットではまだチェックされていませんが、Chromeのブラウザエミュレータでは問題ありません。

しかし、私の友人は自分のIphone6 Plusでサイトをチェックアウトし、navbarの設定が乱れていました。 Btw、私はフレームワークのためにブートストラップ3を使用しています。

私のコードが他の電話機では動作しているが、Iphone6 Plusでは動作しない理由が混乱しています。 多分Iphone6でも同じ問題がありますか？画素密度&解像度はIphone6 Plusのはかなり異なっていること

/* Tablet (Portrait) */ 
@media only screen and (max-width : 768px) and (orientation: portrait) { 
} 
/* Phones (Portrait) */ 
@media only screen and (max-width : 480px) and (orientation: portrait) { 
} 
/* Phones (Landscape) */ 
@media only screen and (max-width : 480px) and (orientation: landscape){ 
} 
/* Tablet (Landscape)*/ 
@media only screen and (max-width :1100px) and (orientation: landscape) { 
} 
/* Medium Devices, Desktops and tablet landscape*/ 
@media only screen and (min-width : 992px) { 
} 
/* Large Screens, Large Desktops */ 
@media only screen and (min-width : 1601px) { 
} 

私はすでにオンラインにチェック：

は、ここに私のメディアのCSSです。 iPhone 6 and 6 Plus Media Queries

これまでのところ、これらのクエリでも問題が解決されませんでした。変更がないようです。私はこの問題がすぐに解消されることを願っています。私はあなたの助けに感謝します。

Answer 1

すべては、デバイスのピクセル比率になり、以前はiphoneの2倍でした。新しいiphone 6 plusに3倍の網膜ディスプレイがあります

/* iPhone 6 landscape */ 
@media only screen and (min-device-width: 375px) 
    and (max-device-width: 667px) 
    and (orientation: landscape) 
    and (-webkit-min-device-pixel-ratio: 2) 
    { 
    /* Your CSS */ 
    } 

/* iPhone 6 portrait */ 
@media only screen 
    and (min-device-width: 375px) 
    and (max-device-width: 667px) 
    and (orientation: portrait) 
    and (-webkit-min-device-pixel-ratio: 2) 
    { 
    /* Your CSS */ 
    } 


/* iPhone 6 Plus landscape */ 
@media only screen 
    and (min-device-width: 414px) 
    and (max-device-width: 736px) 
    and (orientation: landscape) 
    and (-webkit-min-device-pixel-ratio: 3) 
    { 
    /* Your CSS */ 
    } 


/* iPhone 6 Plus portrait */ 
@media only screen 
    and (min-device-width: 414px) 
    and (max-device-width: 736px) 
    and (orientation: portrait) 
    and (-webkit-min-device-pixel-ratio: 3) 
    { 
    /* Your CSS */ 
    } 



/* iPhone 6 and 6 Plus */ 
@media only screen 
    and (max-device-width: 640px), 
    only screen and (max-device-width: 667px), 
    only screen and (max-width: 480px) 
    { 
    /* Your CSS */ 
    } 

さらに詳しい情報は、より多くのブラウザサポートとフォールバックを追加するMDN。

リンク：https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

@media (-webkit-min-device-pixel-ratio: 2), /* Webkit-based browsers */ 
     (min--moz-device-pixel-ratio: 2), /* Older Firefox browsers (prior to Firefox 16) */ 
     (min-resolution: 2dppx),    /* The standard way */ 
     (min-resolution: 192dpi)    /* dppx fallback */ 

それぞれのデバイスピクセル比を有するデバイスのリスト。

リンク：https://bjango.com/articles/min-device-pixel-ratio/