Question

I’m currently starting to use a responsive approach to my sites. I’ve found http://fluidbaselinegrid.com/ to be the best boilerplate for this. But with every boilerplate or grid I’ve tried I can’t get an iPhone or iPad to recognize the media queries when you switch from portrait to landscape mode.

It always loads the correct css in the orientation that you load the page in. But when you go from portrait to landscape it hangs and doesn’t resize properly.

You can even see this happening on http://fluidbaselinegrid.com/.

Does anyone know if this is a quirk with mobile webkit that we have to live with for now, or is there a way to fix this?

Answer 1

I contacted the developer behind Fluid Baseline Grid and got this answer:

I think what you are experiencing is the viewport meta tag.

Current:

Maximum-scale doesn’t allow the user to zoom in/out with finger pinch.
However, it prevents the layout shifting when a device is changed from
portrait to landscape. This was purposely removed to help those who
may have impairment reading smaller text. You can can simply change
the meta tag in the head to set the scale, which will fix the zooming
issue when you rotate from portrait to landscape.

“If web developers want their scale settings to remain consistent when
switching orientations on the iPhone, they must add a maximum-scale
value to prevent this zooming, which has the sometimes-unwanted side
effect of preventing users from zooming in”
– http://hacks.mozilla.org/2010/05/upcoming-changes-to-the-viewport-meta-tag-for-firefox-mobile/

That definitely fixes the issue, but it seems that you can’t have the ability to zoom with a finger pinch and also control the way the layouts switch. Is there a way to work around this?