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 about 3 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 almost 3 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

Vinodh Vidhu about 1 month ago

Along with iphone, I am using Playstation, so I wanted to install Kodi on PS4. I installed using this tutorial thanks

Binay Yadav about 1 month ago

vShare is not available on iOS 10 and now anyone can download all paid apps for free.

Binay Yadav about 1 month ago

Terrarium TV is also available on iPhone 6.