How to force exact scale on ipad

Question

What I'm trying to achieve is: to force scale 1.0 when ipad is in landscape mode, and 0.75 when it's in portrait, but with disabled user scaling. I tried all combinations of meta viewport tag, and nothing worked:

• when user-scalable is no, landscape works fine, but it doesn't scale to 0.75 in portrait, no matter how I set maximum and minimum scale
• when user-scalable is yes, it works fine sometimes, but since there is lot of adding content with ajax, sometimes when page gets longer, the page just scales down to fit whole page on screen, and I want to prevent that

So, is there a way to force scaling to exact number? Or disable scaling when page length changes? (Page width should always be 1024px, no different css for different orientation and no width=device-width, I just need scaling)

Solution 1

Patrick's answer is def useful, here is a more tested version

var checkOrientation;
checkOrientation = function() {
  var viewport;
  viewport = document.querySelector("meta[name=viewport]");
  if (window.orientation === 90 || window.orientation === -90) {
    return viewport.setAttribute("content", "width:device-width, initial-scale=1.0, user-scalable=1");
  } else {
    return viewport.setAttribute("content", "width:device-width, initial-scale=0.6, user-scalable=1");
  }
};
window.onorientationchange = function() {
  return checkOrientation();
};
checkOrientation();

And don't forget to put this in your document's head:

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

Note that, one of the difference, is the commas instead of semi-colons in the arguments

Solution 2

There is no way to achieve this solely with a meta viewport setting.

It is however possible to detect the orientation with javascript, and possible to change the meta viewport-setting with javascript, so you can have a script trigger on orientation-change and setting a different viewport.

Perhaps something like this (not tested):

window.onorientationchange = function() {
  viewport = document.querySelector("meta[name=viewport]");
  if (window.orientation == 90 || window.orientation == -90) {
    viewport.setAttribute('content', 'width=device-width; initial-scale=1.0; user-scalable=1');            
  } else {
    viewport.setAttribute('content', 'width=device-width; initial-scale=0.75; user-scalable=0');            
  } 
}

Solution 3

Don't forget to put the maximum-scale=1 in the javascript as well, and to use the correct "width=device-width":

var checkOrientation;
checkOrientation = function() {
  var viewport;
  viewport = document.querySelector("meta[name=viewport]");
  if (window.orientation === 90 || window.orientation === -90) {
    return viewport.setAttribute("content", "width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=1");
  } else {
    return viewport.setAttribute("content", "width=device-width, initial-scale=0.6, maximum-scale=1, user-scalable=1");
  }
};
window.onorientationchange = function() {
  return checkOrientation();
};
checkOrientation();

Comments

[Ben D]

This is a snippit... your answer may have merit but please explain how you'd use the USER_AGENT string to produce what the OP is asking.

[worldsayshi]

Actually omitting the meta tag in the head, while using the script, seems to have solved some problems for me. I can't really say that I understand though. Seems the static tag competed with the javascript somehow.