18

i have a mobile website for iphone and ipad where i disable user zooming with 

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />

this works fine as long as the site is in landscape mode. the width of the website is exactly the width of the screen. then if i rotate the device into portrait mode it gets scaled down so that it fits the new (shorter) width. this is also ok.

but then if i rotate it back to landscape mode it is suddenly scaled to about 125% that means horizontal scrolling is now possible and zooming is not possible since initially disabled.

how can i make it back at 100% zoom when rotated back to landscape?

thanks!

clamp
  • 33,000
  • 75
  • 203
  • 299

3 Answers3

17

try experimenting with maximum-scale and minimum-scale like so

<meta name="viewport" content="width=device-width, maximum-scale=1.0, minimum-scale=1.0" />

and see if you can achieve what you are looking for..

thumbsup
  • 431
  • 5
  • 11
  • 3
    I just ran some rudimentary tests and the following worked wonders for me: `` – Ray Brown Aug 03 '11 at 15:06
  • This is a good workaround to what I feel is a bug in mobile safari. clamp's original metatag is how I normally set up my sites. I suspect there's something in the DOM in safari that doesn't behave as expected in some sites to mess with the page width that ultimately causes this problem. – ghostfly Jun 11 '12 at 21:12
8

Disabling zoom is a bad idea. It's not a perfect solution, but targeting webkit's scaling of font size on orientation change can help minimize the problem. You would leave the head of the document with:

<meta name="viewport" content="width=device-width, initial-scale=1">

Then you would address the font-size scaling in your CSS like this:

body {
    font-size: 1.5rem;
    line-height: 2.3rem;
    -webkit-text-size-adjust: 100%;
}
/* This prevents mobile Safari from freely adjusting font-size */**
Indranil
  • 2,451
  • 1
  • 23
  • 31
Ronnie Petty
  • 81
  • 1
  • 1
3

Using the maximum-scale and minimum-scaleto stop zooming don't really work because then you take away the user's ability to zoom. That's really a bad idea because it makes your users with bad eyes angry that your website doesn't zoom, while other websites do...

I tried timeouts and all kinds of fancy javascript, then I found this: https://github.com/scottjehl/iOS-Orientationchange-Fix

via this related question: How do I reset the scale/zoom of a web app on an orientation change on the iPhone?

On that post, Andrew Ashbacher posted a link to the code written by Scott Jehl:

/*! A fix for the iOS orientationchange zoom bug. Script by @scottjehl, rebound by @wilto.MIT License.*/(function(m){if(!(/iPhone|iPad|iPod/.test(navigator.platform)&&navigator.userAgent.indexOf("AppleWebKit")>-1)){return}var l=m.document;if(!l.querySelector){return}var n=l.querySelector("meta[name=viewport]"),a=n&&n.getAttribute("content"),k=a+",maximum-scale=1",d=a+",maximum-scale=10",g=true,j,i,h,c;if(!n){return}function f(){n.setAttribute("content",d);g=true}function b(){n.setAttribute("content",k);g=false}function e(o){c=o.accelerationIncludingGravity;j=Math.abs(c.x);i=Math.abs(c.y);h=Math.abs(c.z);if(!m.orientation&&(j>7||((h>6&&i<8||h<8&&i>6)&&j>5))){if(g){b()}}else{if(!g){f()}}}m.addEventListener("orientationchange",f,false);m.addEventListener("devicemotion",e,false)})(this);

That is a solution wrapped nicely in an IIFE so you don't have to worry about name-space issues.

Just drop it in to your script (not into document.ready() if you're using jQuery) and viola!

All it does is disable zoom on devicemotion events that indicate that orientationchange is imminent. It's the best solution I've seen because it actually works and doesn't disable zoom.

EDIT: this approach is not always reliable, especially when you are holding the ipad at an angle. also, i don't think this event is available to gen 1 ipads

Community
  • 1
  • 1
tmsimont
  • 2,651
  • 2
  • 25
  • 36