Menu icon Foundation
iPhone 6 media queries

Hi guys,

Anyone come up with a modification of the standard Foundation 5 media queries to cater for the iphone 6 and 6plus? I want to keep both on the 'small' size without interfering with other devices...

Love to hear what you are doing to deal with these...I am using SASS by the way.

Cheers,

Will

media queriesiphone 6iphone 6 plus

Hi guys,

Anyone come up with a modification of the standard Foundation 5 media queries to cater for the iphone 6 and 6plus? I want to keep both on the 'small' size without interfering with other devices...

Love to hear what you are doing to deal with these...I am using SASS by the way.

Cheers,

Will

Hans McMurdy over 4 years ago

Zurb tweeted about this: https://twitter.com/ZURBfoundation/status/510430140879208449

The rule of thumb is you should be designing for breakpoints not screen resolution.
http://www.electrictoolbox.com/iphone-6-responsive-web-design/

Since you use sass (like developers should) go into the settings file and under "d. Media Query Ranges" (around line 150) and uncomment/change the following:

// $small-range: (0em, 40em)

Here is a px to em converter:
http://pxtoem.com/

The resolution in ems is
iphone 6 = 23.4383m x 41.688em

iphone 6 PLUS = 25,875em x 46.125

I haven't tested this myself because standard foundation breakpoints are good enough for my current need but feel free post your results.

I hope this helps.
- Hans

Will Fairhurst about 4 years ago

Han,

Thanks so much for that and sorry for the late reply....didn't get a notification that you had replied!

I have implemented your suggestions and they are working perfectly so thank you! Totally agree with the breakpoints versus resolution comment but the specific issue I was trying to resolve was on an older site which was back when we were more resolution focused!

Thanks again,

Will

usmsid 9 months ago

  • 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