CODEWITHSUNDEEP
htmlipadviewport
Mario
Mario

Reputation: 41

How to force exact scale on ipad

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:

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)

Upvotes: 4

Views: 11228

Answers (4)

Danetag
Danetag

Reputation: 536

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();

Upvotes: 1

Phil LaNasa
Phil LaNasa

Reputation: 1

Or use your server side language to detect the presence of iPad via the USER_AGENT.

Upvotes: -1

standup75
standup75

Reputation: 4814

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

Upvotes: 6

Patrick Fabrizius
Patrick Fabrizius

Reputation: 587

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

Upvotes: 4

Related Questions