Tablet version is being viewed on mobile

Asked Feb 14 '14 at 19:12

Active Feb 14 '14 at 19:17

Viewed 33 times

I've been making a webpage using Foundation 4 so it is very responsive across all devices.

However, for some odd reason in both Chrome and Safari on iPhone's and mobile in portrait mode (aka should be using the mobile site which is less than 568px wide) it is using the tablet version.

When using your browser and rescaling it to the various sizes, it works absolutely fine, it loads desktop, tablet and mobile.

Why is the mobile site not being used on mobile devices? I'm using all of the foundation media queries so I'm not sure why it isn't working. (I KNOW the mobile site works just fine)

The foundation media queries for mobile is this:

    @media only screen and (max-width: 40em){}

Tablet is :

    @media only screen and (min-width: 40.063em) and (max-width: 64em) {

edited Feb 14 '14 at 19:17

asked Feb 14 '14 at 19:12

Ian Ryan Clarke

you're going to need to add some code – Scott Selby Feb 14 '14 at 19:15
Why are you using relative `em`s for your breakpoints? Why not use pixel? – Mister Epic Feb 14 '14 at 19:39
@ChrisHardie it is how foundation is built. http://foundation.zurb.com/docs/media-queries.html – Ian Ryan Clarke Feb 14 '14 at 19:42
Interesting, I wonder what the value is there given we measure devices in pixels. Ok, are you doing anything that would affect the value of `em`? – Mister Epic Feb 14 '14 at 19:45
I don't beleive so, I have kept all the foundation defaults relating to media queries – Ian Ryan Clarke Feb 14 '14 at 21:04

Tablet version is being viewed on mobile

0 Answers0