Question

我想要达到的目的是：当ipad处于横向模式时强制缩放 1.0 ，当纵向模式时强制 0.75 ，但禁用用户缩放。我尝试了meta视口标记的所有组合，但没有任何效果：

当用户可扩展 否时，横向正常，但无论我如何设置最大，它都不会缩放到0.75 em>和最小比例

当用户可扩展 是时，它有时可以正常工作，但由于有很多用ajax添加内容，有时当页面变长时，页面只会缩放向下以适应屏幕上的整个页面，我想阻止

那么，有没有办法强制缩放到确切的数字？或者在页面长度变化时禁用缩放？（页面宽度应始终为1024px，不同方向没有不同的css，宽度=设备宽度，我只需要缩放）

Answer 1

帕特里克的答案很有用，这是一个更加经过测试的版本

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

不要忘记把它放在你的文件头上：

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

请注意，其中一个区别是参数中的逗号而不是分号

Answer 2

单独使用元视口设置无法实现此目的。

然而，可以使用javascript检测方向，并且可以使用javascript更改元视口设置，因此您可以在方向更改和设置不同视口时使用脚本触发器。

也许这样（未经测试）：

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

Answer 3

不要忘记在javascript中放置maximum-scale = 1，并使用正确的“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();

Answer 4

或使用您的服务器端语言通过USER_AGENT检测iPad的存在。

如何在ipad上强制精确缩放

4 个答案: