开发者

How to force exact scale on ipad

开发者 https://www.devze.com 2023-03-13 04:54 出处:网络
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 n

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)


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


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


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


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

0

精彩评论

暂无评论...
验证码 换一张
取 消