Grow your CSS skills. Land your dream job.

maximum-scale=1, user-scalable:no

  • # January 3, 2012 at 8:27 am

    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!

    # January 3, 2012 at 11:06 am

    < < 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 had trouble with this myself recently (see http://css-tricks.com/forums/discussion/15236/solved-ipad-zoom-problems where I posed the problem initially). After doing a lot of testing, I came to the conclusion that the maximum scale and initial scale and all that wasn’t necessary. The only pages that were zooming in and out (after reloading or rotating) and didn’t show the full width of the page, were those that were still under development.

    Once pages had their “finished” structure and some proper content in there, all navigation and resizing and reloading and zooming went all fine — without any use of the meta viewport stuff. Landscape or portrait, every page would just be showing the full width all the time.

    I think iPad is pretty smart about this stuff and knows when a page needs to be zoomed in or not, or at least it tries to guess.

    Not sure if that applies to your project, but it sure did for mine.

    # January 3, 2012 at 3:14 pm

    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.

    # January 16, 2013 at 7:23 pm

    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

    # July 2, 2013 at 9:45 am

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

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".