web-dev-qa-db-ja.com

iPhone 6および6 Plusのメディアクエリ

IPhone 6と6 Plusのメディアクエリをターゲットとする特定の画面サイズを知っている人はいますか？

また、アイコンのサイズとスプラッシュスクリーンは？

ioscss3media-queriesiphone-6iphone-6-plus
69
MattT

iphone 6

  • Landscape

    @media only screen 
    and (min-device-width : 375px) // or 213.4375em or 3in or 9cm
    and (max-device-width : 667px) // or 41.6875em
    and (width : 667px) // or 41.6875em
    and (height : 375px) // or 23.4375em
    and (orientation : landscape) 
    and (color : 8)
    and (device-aspect-ratio : 375/667)
    and (aspect-ratio : 667/375)
    and (device-pixel-ratio : 2)
    and (-webkit-min-device-pixel-ratio : 2)
{ }

  • ポートレート

    @media only screen 
    and (min-device-width : 375px) // or 213.4375em
    and (max-device-width : 667px) // or 41.6875em
    and (width : 375px) // or 23.4375em
    and (height : 559px) // or 34.9375em
    and (orientation : portrait) 
    and (color : 8)
    and (device-aspect-ratio : 375/667)
    and (aspect-ratio : 375/559)
    and (device-pixel-ratio : 2)
    and (-webkit-min-device-pixel-ratio : 2)
{ }

    お望みなら、(device-width : 375px)と(device-height: 559px)の設定の代わりにmin-とmax-を使うことができます。

    これらすべての設定を使用する必要はなく、これらはすべて可能な設定ではありません。これらは可能なオプションのほんの大部分ですので、あなたは自分のニーズに合ったものを選んで選ぶことができます

  • ユーザーエージェント

    iOS 9.0（13A4305g）で私のiPhone 6（モデルMG6G2LL/A）でテストしました

    # Safari
Mozilla/5.0 (iPhone; CPU iPhone OS 9_0 like Mac OS X) AppleWebKit/601.1.39 (KHTML, like Gecko) Version/9.0 Mobile/13A4305g Safari 601.1
# Google Chrome
Mozilla/5.0 (Macintosh; Intel Mac OS X 10_7_3) AppleWebKit/534.53.11 (KHTML, like Gecko) Version/5.1.3 Safari/534.53.10 (000102)
# Mercury
Mozilla/5.0 (iPhone; CPU iPhone OS 7_0_4 like Mac OS X) AppleWebKit/537.51.1 (KHTML, like Gecko) Version/7.0 Mobile/11B554a Safari/9537.53

  • 画像を起動する

    • ポートレートは750 x 1334（@ 2x）
    • 風景の場合は1334 x 750（@ 2x）

  • アプリのアイコン

    • 120×120

iPhone 6以降

  • Landscape

    @media only screen 
    and (min-device-width : 414px) 
    and (max-device-width : 736px) 
    and (orientation : landscape) 
    and (-webkit-min-device-pixel-ratio : 3) 
{ }

  • ポートレート

    @media only screen 
    and (min-device-width : 414px) 
    and (max-device-width : 736px)
    and (device-width : 414px)
    and (device-height : 736px)
    and (orientation : portrait) 
    and (-webkit-min-device-pixel-ratio : 3) 
    and (-webkit-device-pixel-ratio : 3)
{ }

  • 画像を起動する

    • ポートレートは1242 x 2208（@ 3x）
    • 横長2208 x 1242（@ 3 x）

  • アプリのアイコン

    • 180×180

iPhone 6と6+

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

予測された

によると、AppleのWebサイト iPhone 6 Plusは1インチあたり401ピクセルで、1920 x 1080になります。iPhone6の小さいバージョンは1334 x 750になります。 326 PPI。

そのため、情報が正しいと仮定して、iPhone 6のメディアクエリを書くことができます。

@media screen 
    and (min-device-width : 1080px) 
    and (max-device-width : 1920px) 
    and (min-resolution: 401dpi) 
    and (device-aspect-ratio:16/9) 
{ }

@media screen 
    and (min-device-width : 750px) 
    and (max-device-width : 1334px) 
    and (min-resolution: 326dpi) 
{ }

device-aspect-ratio は http://dev.w3.org/csswg/mediaqueries-4/で廃止される予定です。 および 縦横比 に置き換え

最小幅と最大幅は1704 x 960のようなものです。

アップルウォッチ（投機的）

（私の知る限りでは）公式のスペックシートはまだないので、Watchのスペックはまだ少し投機的です。しかしAppleは このプレスリリース で、Watchは2つのサイズで利用可能になるだろうと述べていました.. 38mmと42mm。

さらに、これらのサイズはWatchの全体的なサイズではなく画面サイズを指すと仮定します。これらのメディアクエリは機能するはずです。また、不要なターゲティングを犠牲にすることなく、いずれかのシナリオをカバーすることができます。 ..

@media (!small) and (damn-small), (omfg) { }

または

@media 
    (max-device-width:42mm) 
    and (min-device-width:38mm) 
{ }

注目すべきは、W3Cの Media Queries Level 4 は現在最初の公開草案としてのみ利用可能で、一度利用可能になると、より小さなウェアラブルで設計された多くの新機能が追加されます。このようなデバイスを念頭に置いてください。

162
davidcondrey

これは私のために今働いているものです：

iphone 6

@media only screen and (max-device-width: 667px) 
    and (-webkit-device-pixel-ratio: 2) {

iPhone 6以降

@media screen and (min-device-width : 414px) 
    and (-webkit-device-pixel-ratio: 3)
19
Fiona - myaccessible.website

これはiPhone 6のために私のために働く

/*iPhone 6 Portrait*/
@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (orientation : portrait) { 

}

/*iPhone 6 landscape*/
@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (orientation : landscape) { 

}

/*iPhone 6+ Portrait*/
@media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (orientation : portrait) { 

}

/*iPhone 6+ landscape*/
@media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (orientation : landscape) { 

}

/*iPhone 6 and iPhone 6+ portrait and landscape*/
@media only screen and (max-device-width: 640px), only screen and (max-device-width: 667px), only screen and (max-width: 480px){ 
}

/*iPhone 6 and iPhone 6+ portrait*/
@media only screen and (max-device-width: 640px), only screen and (max-device-width: 667px), only screen and (max-width: 480px) and (orientation : portrait){ 

}

/*iPhone 6 and iPhone 6+ landscape*/
@media only screen and (max-device-width: 640px), only screen and (max-device-width: 667px), only screen and (max-width: 480px) and (orientation : landscape){ 

}
7
activeping

まさにあなたはiPhone 6がそれの最小幅についてあると知っています。 375ではなく320だと思われます。

@media only screen and (max-device-width: 667px) 
and (-webkit-device-pixel-ratio: 2) {

}

これが私がiPhone 6をターゲットにするために働くことができる唯一のものでした。

@media screen and (min-device-width : 414px) 
and (max-device-height : 736px) and (max-resolution: 401dpi)
{

}
4
DevelumPHP

異なる画面サイズのメディアクエリを使用して、画面サイズをターゲットにする必要があります。

iPhone：の場合

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

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

そしてデスクトップバージョンの場合：

@media only screen (max-width: 1080){

}
3
RamThakur

iPhone X

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 812px) 
  and (-webkit-min-device-pixel-ratio: 3)
  /* uncomment for only portrait: */
  /* and (orientation: portrait) */
  /* uncomment for only landscape: */
  /* and (orientation: landscape) */ { 

}

iPhone 6+、7+、8+

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 414px) 
  and (max-device-width: 736px) 
  and (-webkit-min-device-pixel-ratio: 3)
  /* uncomment for only portrait: */
  /* and (orientation: portrait) */
  /* uncomment for only landscape: */
  /* and (orientation: landscape) */ { 

}

iPhone 6、6S、7、8

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px) 
  and (-webkit-min-device-pixel-ratio: 2)
  /* uncomment for only portrait: */
  /* and (orientation: portrait) */
  /* uncomment for only landscape: */
  /* and (orientation: landscape) */ { 

}

ソース： 標準デバイス用のメディアクエリー

3
simhumileco

IPhone 5の場合

@media screen and (device-aspect-ratio: 40/71)

iPhone 6,7,8用

@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (orientation : portrait)

iPhone 6 +、7 +、8 +の場合

@media screen and (-webkit-device-pixel-ratio: 3) and (min-device-width: 414px)

今のところ私にとってはうまくいっている。

1
jegadeesh