Foundation4 breakpoint for mobile not detected for high density devices

Question

Specifically, when testing my site on a Samsung Galaxy SIII I'm seeing the styles defined for the desktop.

How do you get the phone to use the mobile styles (with a 320px width in mind) or to utilize 'hide-for-small' class etc?

Currently, on that phone (and I figure retina display devices too) you'll not see .hide-for-small or global css being applied, only media queries for larger (768px and above) viewports.

Does anyone have experience making high DPI devices, i.e: (-webkit-min-device-pixel-ratio: 2) work with Foundation4?

Answer 1

Have you remembered to include the Viewport meta tag? The S3's viewport is 360x604, so if you're seeing styles for media queries greater than 360 on your portrait view, chances are you have your viewport misconfigured. I'd encourage the following viewport tag and @viewport directive (in your CSS):

<meta name="viewport" content="initial-scale=1.0">

@viewport { zoom: 1; }

Also take a look at this related question on the viewport meta tag on the S3.