iPhone 6 and 6 Plus Media Queries

Question

Does anyone know specific screen sizes to target media queries for iPhone 6 and 6 Plus   Also  the icon sizes and splash screens

User · Answer

For iPhone 5    media screen and  device-aspect-ratio  40 71    for iPhone 6 7 8   media only screen and  min-device-width  375px  and  max-device-width  667px  and  orientation   portrait    for iPhone 6  7  8    media screen and  -webkit-device-pixel-ratio  3  and  min-device-width  414px    Working fine for me as of now

User · Answer

You have to target screen size using media query for different screen size   for 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        and for desktop version    media only screen  max-width  1080

User · Answer

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       Portrait   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        if you prefer you can use  device-width   375px  and  device-height  559px  in place of the min- and max- settings   It is not necessary to use all of these settings  and these are not all the possible settings   These are just the majority of possible options so you can pick and choose whichever ones meet your needs  User Agent  tested with my iPhone 6  model MG6G2LL A  with 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  Launch images   750 x 1334   2x  for portrait 1334 x 750   2x  for landscape  App icon   120 x 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        Portrait   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       Launch images   1242 x 2208   3x  for portrait 2208 x 1242   3x  for landscape  App icon   180 x 180      iPhone 6 and 6    media only screen      and  max-device-width  640px        only screen and  max-device-width  667px        only screen and  max-width  480px          Predicted  According to the Apple website the iPhone 6 Plus will have 401 pixels-per-inch and be 1920 x 1080   The smaller version of the iPhone 6 will be 1334 x 750 with 326 PPI   So  assuming that information is correct  we can write a media query for the 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           Note that device-aspect-ratio will be deprecated in http   dev w3 org csswg mediaqueries-4  and replaced with aspect-ratio  Min-width and max-width may be something like 1704 x 960     Apple Watch  speculative   Specs on the Watch are still a bit speculative since  as far as I m aware  there has been no official spec sheet yet   But Apple did mention in this press release that the Watch will be available in two sizes   38mm and 42mm   Further assuming   that those sizes refer to the screen size rather than the overall size of the Watch face these media queries should work   And I m sure you could give or take a few millimeters to cover either scenario without sacrificing any unwanted targeting because      media   small  and  damn-small    omfg        or   media       max-device-width 42mm       and  min-device-width 38mm         It s worth noting that Media Queries Level 4 from W3C currently only available as a first public draft  once available for use will bring with it a lot of new features designed with smaller wearable devices like this in mind

User · Answer

This works for me for the 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

User · Answer

This is what is working for me right now   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

User · Answer

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  and 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 and 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

User · Answer

Just so you know the iPhone 6 lies about it s min-width    It thinks it is 320 instead of 375 it is suppose to be      media only screen and  max-device-width  667px   and  -webkit-device-pixel-ratio  2         This was the only thing I could get to work to target the iPhone 6    The 6  works fine the using this method     media screen and  min-device-width   414px   and  max-device-height   736px  and  max-resolution  401dpi

[ios] iPhone 6 and 6 Plus Media Queries

Examples related to ios

Examples related to css

Examples related to media-queries

Examples related to iphone-6

Examples related to iphone-6-plus