zapytania o Media iPhone 6 i 6 Plus

Czy ktoś zna konkretne rozmiary ekranu do kierowania zapytań o media dla iPhone 6 i 6 Plus?

Również rozmiary ikon i ekrany powitalne?

Author: Vadim Kotov, 2014-09-10
Source

7 answers

IPhone 6

  • Krajobraz 

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

    jeśli wolisz, możesz użyć (device-width : 375px) i (device-height: 559px) zamiast ustawień min- i max-.

    nie jest konieczne używanie wszystkich tych ustawień i nie są to wszystkie możliwe ustawienia. To tylko większość możliwych opcji, więc możesz wybrać te, które spełniają Twoje potrzeby.

  • Użytkownik Agent

    testowane z moim iPhone 6 (model MG6G2LL / A) z 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

  • Uruchom zdjęcia

    • 750 x 1334 (@2x) na portret
    • 1334 x 750 (@2x) dla krajobrazu

  • Ikona aplikacji

    • 120 x 120

IPhone 6+

  • Krajobraz 

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

  • Uruchomienie obrazy

    • 1242 x 2208 (@3x) na portret
    • 2208 x 1242 (@3x) dla krajobrazu

  • Ikona aplikacji

    • 180 x 180

IPhone 6 i 6 + 

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

[[17]}według strony internetowej Apple iPhone 6 Plus będzie miał 401 pikseli na cal i być 1920 x 1080. Mniejsza wersja iPhone 6 będzie 1334 x 750 z 326 PPI.

Tak więc, zakładając, że informacje są poprawne, możemy napisać zapytanie o media dla 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) 
{ }

Zauważ, że device-aspect-ratio będzie przestarzały w http://dev.w3.org/csswg/mediaqueries-4 / i zastąpione proporcje

Min-szerokość i max-szerokość mogą być jakieś 1704 x 960.

Apple Watch (spekulacyjny)

Specyfikacje zegarka są nadal trochę spekulacyjne, ponieważ (o ile mi wiadomo) nie było oficjalnego arkusza specyfikacji jeszcze. Ale Apple wspomniało w w tej informacji prasowej , że zegarek będzie dostępny w dwóch rozmiarach.. 38mm i 42mm.

Dalej zakładając.. że te rozmiary odnoszą się do rozmiaru ekranu, a nie ogólnego rozmiaru tarczy zegarka, te zapytania o media powinny działać.. I jestem pewien, że możesz dać lub wziąć kilka milimetrów, aby pokryć każdy scenariusz bez poświęcania niechcianego celu, ponieważ.. 

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

Lub 

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

Warto zauważyć, że Media Queries Level 4 from W3C obecnie dostępne tylko jako pierwszy publiczny szkic, po udostępnieniu do użytku przyniesie ze sobą wiele nowych funkcji zaprojektowanych z myślą o mniejszych urządzeniach do noszenia, takich jak ten.

 157
Author: davidcondrey,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-08-08 07:39:38

To właśnie dla mnie teraz działa:

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)
 17
Author: Fiona - myaccessible.website,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-09-26 14:50:15

To działa dla mnie na 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){ 

}
 6
Author: activeping,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-11-20 00:29:18

Żebyś wiedział, że iPhone 6 kłamie o szerokości min. Uważa, że jest to 320 zamiast 375. 

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

}
[2]} to była jedyna rzecz, którą mogłem dostać się do pracy, aby celować w iPhone 6. 6 + działa dobrze przy użyciu tej metody: 
@media screen and (min-device-width : 414px) 
and (max-device-height : 736px) and (max-resolution: 401dpi)
{

}
 3
Author: DevelumPHP,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-09-23 22:07:53

Musisz dopasować rozmiar ekranu za pomocą zapytania media dla różnych rozmiarów ekranu.

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

I dla desktop Wersja: 

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

}
 2
Author: RamThakur,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-03-18 15:29:37

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

}

Source: Media Queries for Standard Devices

 2
Author: simhumileco,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-12-28 23:32:21

Dla iPhone 5, 

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

Dla iPhone 6,7,8 

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

Dla iPhone ' a 6+,7+,8+

@media screen and (-webkit-device-pixel-ratio: 3) and (min-device-width: 414px)
Od teraz działa dobrze dla mnie.
 0
Author: jegadeesh,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-02-26 06:47:07