Kent iemand specifieke schermformaten om media-query’s voor iPhone 6 en 6 PLUS te targeten?

Ook de pictogrammaten en splash-schermen?

Antwoord 1, Autoriteit 100%

iPhone 6

• Landschap

  @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)
  { }
  

• Portret

  @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)
  { }
  

  Als u verkiest, kunt u (device-width : 375px)en (device-height: 559px)in plaats van de min-EN max-INSTELLINGEN.

  Het is niet nodig om al deze instellingen te gebruiken en dit zijn niet alle mogelijke instellingen. Dit zijn slechts de meerderheid van de mogelijke opties, zodat u kunt kiezen en kiezen welke ze aan uw behoeften voldoen.

• Gebruikersagent

  Getest met mijn iPhone 6 (Model MG6G2LL / A) met iOS 9.0 (13A4305G)

  # 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
  

• Afbeeldingen starten

  • 750 x 1334 (@2x) voor portret
  • 1334 x 750 (@2x) voor liggend

• App-pictogram

  • 120 x 120

iPhone 6+

• Landschap

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

• Portret

  @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)
  { }
  

• Afbeeldingen starten

  • 1242 x 2208 (@3x) voor portret
  • 2208 x 1242 (@3x) voor landschap

• App-pictogram

  • 180 x 180

iPhone 6 en 6+

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

Voorspeld

Volgens de Apple-websitezal de iPhone 6 Plus 401 pixels per inch hebben en 1920 zijn x 1080. De kleinere versie van de iPhone 6 wordt 1334 x 750 met 326 PPI.

Dus, ervan uitgaande dat de informatie correct is, kunnen we een mediaquery schrijven voor de 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) 
{ }

Houd er rekening mee dat apparaat- aspect-ratiowordt beëindigd in http://dev.w3.org/csswg/mediaqueries-4/ en vervangen door aspect-ratio

Min-width en max-width kunnen ongeveer 1704 x 960 zijn.

Apple Watch (speculatief)

De specificaties van het horloge zijn nog steeds een beetje speculatief, aangezien er (voor zover ik weet) nog geen officieel specificatieblad is. Maar Apple noemde in dit persberichtdat het horloge verkrijgbaar zal zijn in twee maten: 38 mm en 42 mm.

Ervan uitgaande dat deze formaten verwijzen naar de schermgrootte in plaats van de totale grootte van de wijzerplaat, zouden deze mediaquery’s moeten werken. En ik weet zeker dat u een paar millimeter kunt geven of nemen om beide scenario’s te dekken zonder concessies te doen ongewenste targeting omdat..

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

of

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

Het is vermeldenswaard dat Media Queries Level 4van W3C momenteel alleen beschikbaar is als een eerste openbare versie, eenmaal beschikbaar voor gebruik, brengt veel nieuwe functies met zich mee die zijn ontworpen met kleinere draagbare apparaten zoals deze in gedachten.

Antwoord 2, autoriteit 12%

Dit is wat op dit moment voor mij werkt:

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)

Antwoord 3, autoriteit 4%

Dit werkt voor mij voor de 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){ 
}

Antwoord 4, Autoriteit 2%

, zodat u weet dat de iPhone 6 ligt over zijn min-breedte. Het denkt dat het 320 is in plaats van 375 het is verondersteld te zijn.

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

Dit was het enige dat ik aan het werk zou kunnen gaan om de iPhone 6. De 6+ werkt prima het gebruik van deze methode:

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

Antwoord 5, Autoriteit 2%

U moet het scherm van de schermgrootte gebruiken met behulp van Media Query voor verschillende schermgrootte.

Voor 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)
{ }

en voor desktopversie:

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

Antwoord 6, autoriteit 2%

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+ en 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 en 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) */ { 
}

Bron: Mediaquery’s voor standaardapparaten

Antwoord 7

Voor iPhone 5,

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

voor iPhone 6,7,8

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

Voor iPhone 6 +, 7 +, 8 +

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

Werken prima voor mij vanaf nu.