maximum-scale=1, user-scalable:no

[Andy Howells]

Hi all,

I’m trying to fix the iPad rotate zoom out on a responsive design I’m building. Currently the easiest fix I can find is using the below;

This works great on rotation and suits display on iPad & iphone, however – I realise this isn’t very accessible as visually impaired users may want to zoom in on text.

That being said, providing a max scale means on rotate to landscape the iPad scales up but doesn’t effectively “zoom out” so the page overflows the visible area.

I’ve attempted to use a fix from the link below, but this has a knock on for the iPhone which then does not show the responsive size and instead pretty much displays the same layout as the iPad.

https://gist.github.com/901295/229d163414e22ebb14a6a6ba0b9777118f02e52d

Has anyone else had experience with this or managed a fix? Any suggestions on a fix or on whether or not to use restrictive max scale & user scale would be much appreciated!

[Andy Howells]

Thanks Senff, I tried again now that the pages have lots of content, but sadly my iPad hates me.

I’m soooooo tempted to use prohibit zooming on ios just to cure it but inevitably there’ll be a few people who will need to zoom in on the text.

I will keep bashing out some ideas to see if I can come up with a solution – if I do I’ll stick it straight on here.

[AskWPGirl]

Hi Andy,

I also have the same issue on all my “responsive” sites. I’m wondering if anyone has come up with a non-Javascript solution that doesn’t involve disabling zoom.

Angela

[Jsturgessmeyers]

I use minimum scale so that users can zoom in, but cannot zoom out.

[Author]

Posts