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)

Answer 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

Answer 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');            
  } 
}