CODEWITHSUNDEEP
cssiosmobilemedia-queriesresponsive-design
Lee McAlilly
Lee McAlilly

Reputation: 9316

Trouble Switching from Portrait to Landscape using Media Queries

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?

Upvotes: 1

Views: 4224

Answers (2)

marcom
marcom

Reputation: 1

I solved adding 'initial-scale=1' only (and not 'maximum-scale=1') to the viewport meta tag

Upvotes: 0

Lee McAlilly
Lee McAlilly

Reputation: 9316

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?

Upvotes: 1

Related Questions