Search code examples
iosmedia-queriesresponsiveiphone-6zurb-foundation-5

Foundation - 5 iPhone 6 website being shown in desktop version


I am building a website using Foundation 5, however when viewed on iPhone 6 or 6+ it shows the desktop version and that's easy to understand.

However what is the best way/best practice to stick to a mobile view as if it was for (iPhone 4 or 5)?


Solution

  • If you are using Foundation Sass, go to the settings file and uncomment the line in the media query section that reads:

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

    The iPhone 6 screen is 23.4383em x 41.688em, and the iPhone 6 Plus screen is 25.875em x 46.125em. If you change $small-range to go higher than 46.125em it should keep it at mobile view on those iPhones.