Question

当用户在纵向模式下使用移动设备访问时，是否可以在我的页面上检测，例如使用Javascript，并在用户将手机旋转到横向时停止方向更改？我的页面上有游戏，仅针对纵向显示进行了优化，我不希望它在横向上显示。

Answer 1

正在开发新的API（目前可用）！

screen.orientation.lock();   // webkit only

和

screen.lockOrientation("orientation");

“orientation”可以是以下任何一种：

portrait-primary - 它表示屏幕处于主纵向模式时的方向。如果设备处于正常位置且该位置处于纵向状态，或者设备的正常位置处于横向状态且设备顺时针旋转90°，则屏幕将被视为其主要纵向模式。正常位置取决于设备。

纵向次要 - 它表示屏幕处于次要肖像模式时的方向。如果设备与其正常位置保持180°并且该位置是纵向的，或者如果设备的正常位置处于横向状态并且设备被保持逆时针旋转90°，则在其次要肖像模式中考虑屏幕。正常位置取决于设备。

landscape-primary - 它表示屏幕处于主要横向模式时的方向。如果设备处于正常位置并且该位置处于横向状态，或者如果设备的正常位置是纵向并且设备保持顺时针旋转90°，则在其主要横向模式中考虑屏幕。正常位置取决于设备。

landscape-secondary - 它表示屏幕处于次要横向模式时的方向。如果设备保持与其正常位置成180°并且该位置处于横向，或者如果设备的正常位置是纵向并且设备被保持逆时针旋转90°，则在其次要横向模式中考虑屏幕。正常位置取决于设备。

肖像 - 它代表肖像 - 主要和纵向 - 次要。

风景 - 它代表了景观 - 主要和景观 - 次要。

默认 - 它代表肖像 - 主要和横向 - 主要取决于设备的自然方向。例如，如果面板分辨率为1280 * 800，则默认设置为横向，如果分辨率为800 * 1280，则默认设置为纵向。

Mozilla建议在屏幕上添加一个lockOrientationUniversal，使其更具跨浏览器兼容性。

screen.lockOrientationUniversal = screen.lockOrientation || screen.mozLockOrientation || screen.msLockOrientation;

转到此处获取更多信息：https://developer.mozilla.org/en-US/docs/Web/API/Screen/lockOrientation

Answer 2

在启用JavaScript的浏览器中，应该很容易确定屏幕是横向还是纵向模式，compensate using CSS。为用户提供禁用此选项或至少警告他们设备轮换无法正常工作可能会有所帮助。

修改

检测浏览器方向的最简单方法是检查浏览器的宽度与浏览器的高度。这也具有以下优点：您将知道游戏是否正在以横向模式自然定向的设备上播放（正如某些移动设备（如PSP））。这比尝试禁用设备旋转更有意义。

编辑2

Daz已经展示了如何检测设备方向，但检测方向只是解决方案的一半。如果想要反转自动方向更改，则需要将所有内容旋转90°或270°/ -90°，例如

$(window).bind('orientationchange resize', function(event){
  if (event.orientation) {
    if (event.orientation == 'landscape') {
      if (window.rotation == 90) {
        rotate(this, -90);
      } else {
        rotate(this, 90);
      }
    }
  }
});

function rotate(el, degs) {
  iedegs = degs/90;
  if (iedegs < 0) iedegs += 4;
  transform = 'rotate('+degs+'deg)';
  iefilter = 'progid:DXImageTransform.Microsoft.BasicImage(rotation='+iedegs+')';
  styles = {
    transform: transform,
    '-webkit-transform': transform,
    '-moz-transform': transform,
    '-o-transform': transform,
    filter: iefilter,
    '-ms-filter': iefilter
  };
  $(el).css(styles);
}

注意：如果你想在IE中以任意角度旋转（出于其他目的），你需要使用矩阵变换，例如

rads = degs * Math.PI / 180;
m11 = m22 = Math.cos(rads);
m21 = Math.sin(rads);
m12 = -m21;
iefilter = "progid:DXImageTransform.Microsoft.Matrix("
  + "M11 = " + m11 + ", "
  + "M12 = " + m12 + ", "
  + "M21 = " + m21 + ", "
  + "M22 = " + m22 + ", sizingMethod = 'auto expand')";
styles['filter'] = styles['-ms-filter'] = iefilter;

- 或使用CSS Sandpaper。此外，这将旋转样式应用于窗口对象，我从未实际测试过，也不知道是否有效。您可能需要将样式应用于文档元素。

无论如何，我仍然建议只显示一条消息，要求用户以纵向模式玩游戏。

Answer 3

似乎很奇怪，没有人提出CSS媒体查询解决方案：

@media screen and (orientation: portrait) {
  ...
}

以及使用特定样式表的选项：

<link rel="stylesheet" type="text/css" href="css/style_p.css" media="screen and (orientation: portrait)">

MDN： https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries#orientation

Answer 4

简单的Javascript代码，使移动浏览器以纵向或横向显示..

（即使你必须在两个DIV中输入两次html代码（每个模式一个），可以说这比使用javascript更改样式表加载速度快......

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Mobile Device</title>
<script type="text/javascript">
// Detect whether device supports orientationchange event, otherwise fall back to
// the resize event.
var supportsOrientationChange = "onorientationchange" in window,
    orientationEvent = supportsOrientationChange ? "orientationchange" : "resize";

window.addEventListener(orientationEvent, function() {
    if(window.orientation==0)
    {
      document.getElementById('portrait').style.display = '';
      document.getElementById('landscape').style.display = 'none';
    }
    else if(window.orientation==90)
    {
      document.getElementById('portrait').style.display = 'none';
      document.getElementById('landscape').style.display = '';
    }
}, false);
</script>
<meta name="HandheldFriendly" content="true" />
<meta name="viewport" content="width=device-width, height=device-height, user-scalable=no" />
</head>
<body>
<div id="portrait" style="width:100%;height:100%;font-size:20px;">Portrait</div>
<div id="landscape" style="width:100%;height:100%;font-size:20px;">Landscape</div>

<script type="text/javascript">
if(window.orientation==0)
{
  document.getElementById('portrait').style.display = '';
  document.getElementById('landscape').style.display = 'none';
}
else if(window.orientation==90)
{
  document.getElementById('portrait').style.display = 'none';
  document.getElementById('landscape').style.display = '';
}
</script>
</body>
</html>

在Android HTC Sense和Apple iPad上测试并运行。

Answer 5

使用新的CSS3功能，您可以旋转页面，使其旋转方向相反。对不起，没有IE7支持。：（

var rotate = 0 - window.orientation;
setAttribute("transform:rotate("+rotate+"deg);-ms-transform:rotate("+rotate+"deg);-webkit-transform:rotate("+rotate+"deg)", "style");

Answer 6

您可以使用screenSize.width和screenSize.height属性并检测宽度＆gt;高度，然后通过让用户知道或相应地调整屏幕来处理这种情况。

但最好的解决方案是@ Doozer1979所说的......为什么要覆盖用户喜欢的内容？

Answer 7

您可以检测方向变化，但我认为您无法阻止它。

Answer 8

#rotate-device {
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: 9999;
    top: 0;
    left: 0;
    background-color: #000;
    background-image: url(/path to img/rotate.png);
    background-size: 100px 100px;
    background-position: center;
    background-repeat: no-repeat;
    display: none;
}

@media only screen and (max-device-width: 667px) and (min-device-width: 320px) and (orientation: landscape){
	#rotate-device {
		display: block;
	}
}

<div id="rotate-device"></div>

阻止移动网页上的设备轮换

8 个答案:

修改

编辑2