当前位置： 文江博客 话题详情

阻止移动网页上的设备旋转

发布于 2024-09-14 16:03:05 字数 113 浏览 10 评论 0 原文

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

原文

Is it possible to detect on my page, for example using Javascript, when user visit it using mobile device in portrait mode, and stop orientation changing when user rotate its phone to landscape? There is game on my page, optimized for portrait display only and I don't want it in landscape.

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（9）

痞味浪人 2024-09-21 16:03:05

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

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

其中

screen.lockOrientation("orientation");

“方向”可以是以下任意一项：

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

肖像次要 -
它表示屏幕处于辅助纵向模式时的方向。如果设备与正常位置成 180° 且该位置为纵向，或者设备的正常位置为横向且所持设备逆时针旋转 90°，则屏幕被视为处于辅助纵向模式。正常位置取决于设备。

景观主 -
它表示屏幕处于主要横向模式时的方向。如果设备保持在其正常位置并且该位置处于横向，或者如果设备的正常位置处于纵向并且所握住的设备顺时针旋转 90°，则屏幕被视为处于其主要横向模式。正常位置取决于设备。

景观次要 -
它表示屏幕处于辅助横向模式时的方向。如果所持设备与其正常位置成 180° 并且该位置为横向，或者如果设备的正常位置为纵向且所持设备逆时针旋转 90°，则屏幕被视为处于辅助横向模式。正常位置取决于设备。

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

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

默认 -
它表示纵向主要还是横向主要取决于设备的自然方向。例如，如果面板分辨率为1280800，则默认为横向，如果分辨率为8001280，则默认为纵向。

Mozilla 建议向屏幕添加 lockOrientationUniversal，以使其更具跨浏览器兼容性。

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

转到此处了解更多信息（已弃用的 API）：https://developer.mozilla.org/en-US/docs/Web/API/Screen/lockOrientation

MDN 中的现代 API 文档位于：https://developer.mozilla.org/en-US/docs/Web/API/ScreenOrientation/lock

New API's are developing (and are currently available)!

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

and

screen.lockOrientation("orientation");

Where "orientation" can be any of the following:

portrait-primary -
It represents the orientation of the screen when it is in its primary portrait mode. A screen is considered in its primary portrait mode if the device is held in its normal position and that position is in portrait, or if the normal position of the device is in landscape and the device held turned by 90° clockwise. The normal position is device dependant.

portrait-secondary -
It represents the orientation of the screen when it is in its secondary portrait mode. A screen is considered in its secondary portrait mode if the device is held 180° from its normal position and that position is in portrait, or if the normal position of the device is in landscape and the device held is turned by 90° anticlockwise. The normal position is device dependant.

landscape-primary -
It represents the orientation of the screen when it is in its primary landscape mode. A screen is considered in its primary landscape mode if the device is held in its normal position and that position is in landscape, or if the normal position of the device is in portrait and the device held is turned by 90° clockwise. The normal position is device dependant.

landscape-secondary -
It represents the orientation of the screen when it is in its secondary landscape mode. A screen is considered in its secondary landscape mode if the device held is 180° from its normal position and that position is in landscape, or if the normal position of the device is in portrait and the device held is turned by 90° anticlockwise. The normal position is device dependant.

portrait -
It represents both portrait-primary and portrait-secondary.

landscape -
It represents both landscape-primary and landscape-secondary.

default -
It represents either portrait-primary and landscape-primary depends on natural orientation of devices. For example, if the panel resolution is 1280800, default will make it landscape, if the resolution is 8001280, default will make it to portrait.

Mozilla recommends adding a lockOrientationUniversal to screen to make it more cross-browser compatible.

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

Go here for more info (deprecated API): https://developer.mozilla.org/en-US/docs/Web/API/Screen/lockOrientation

Modern API docs in MDN is here: https://developer.mozilla.org/en-US/docs/Web/API/ScreenOrientation/lock

回复 原文
時窥 2024-09-21 16:03:05

在支持 JavaScript 的浏览器中，应该很容易确定屏幕是横向还是纵向模式，并且 使用 CSS 进行补偿。为用户提供禁用此功能的选项或至少警告他们设备旋转将无法正常工作可能会有所帮助。

编辑

检测浏览器方向的最简单方法是检查浏览器的宽度与浏览器的高度。这还有一个优点，即您可以知道游戏是否在自然横向模式的设备上玩（就像某些移动设备，如 PSP）。这比尝试禁用设备旋转更有意义。

Edit 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 砂纸。另外，这将旋转样式应用于窗口对象，我从未实际测试过，也不知道是否有效。您可能需要将样式应用到文档元素。

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

In JavaScript-enabled browsers it should be easy to determine if the screen is in landscape or portrait mode and compensate using CSS. It may be helpful to give users the option to disable this or at least warn them that device rotation will not work properly.

Edit

The easiest way to detect the orientation of the browser is to check the width of the browser versus the height of the browser. This also has the advantage that you'll know if the game is being played on a device that is naturally oriented in landscape mode (as some mobile devices like the PSP are). This makes more sense than trying to disable device rotation.

Edit 2

Daz has shown how you can detect device orientation, but detecting orientation is only half of the solution. If want to reverse the automatic orientation change, you'll need to rotate everything either 90° or 270°/-90°, e.g.

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

Note: if you want to rotate in IE by an arbitrary angle (for other purposes), you'll need to use matrix transform, e.g.

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;

—or use CSS Sandpaper. Also, this applies the rotation style to the window object, which I've never actually tested and don't know if works or not. You may need to apply the style to a document element instead.

Anyway, I would still recommend simply displaying a message that asks the user to play the game in portrait mode.

回复 原文
浅紫色的梦幻 2024-09-21 16:03:05

似乎很奇怪，没有人提出 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

seems weird that no one proposed the CSS media query solution:

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

and the option to use a specific style sheet:

<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

回复 原文
多谢你的绝情让我学会死心 2024-09-21 16:03:05

简单的 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 上测试并运行

Simple Javascript code to make mobile browser display either in portrait or landscape..

(Even though you have to enter html code twice in the two DIVs (one for each mode), arguably this will load faster than using javascript to change the stylesheet...

<!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>

Tested and works on Android HTC Sense and Apple iPad.

回复 原文
陈甜 2024-09-21 16:03:05

使用新的 CSS3 功能，您可以将页面旋转到与旋转方向相反的方向。抱歉，不支持 IE7-。 :(。

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

With the new CSS3 features, you could rotate the page the opposite orientation that they rotated. Sorry, no IE7- support. :(.

var rotate = 0 - window.orientation;
setAttribute("transform:rotate("+rotate+"deg);-ms-transform:rotate("+rotate+"deg);-webkit-transform:rotate("+rotate+"deg)", "style");
回复 原文
落花随流水 2024-09-21 16:03:05

这个解决方案对我有用，它只是在横向时将整个页面旋转 90 度（有效地将屏幕锁定为纵向）。我无法选择这里的其他一些选项，因为我需要支持 Safari。

@media screen and (min-width: 320px) and (max-width: 767px) and (orientation: landscape) {
  html {
    transform: rotate(-90deg);
    transform-origin: left top;
    width: 100vh;
    overflow-x: hidden;
    position: absolute;
    top: 100%;
    left: 0;
  }
}

在这里找到它： https://css-tricks.com/snippets/css/orientation -锁/

This solution worked for me, which just rotates the entire page 90 degrees when it's in landscape (effectively locking the screen in portrait). I couldn't go with some of the other options here, because I needed to support Safari.

@media screen and (min-width: 320px) and (max-width: 767px) and (orientation: landscape) {
  html {
    transform: rotate(-90deg);
    transform-origin: left top;
    width: 100vh;
    overflow-x: hidden;
    position: absolute;
    top: 100%;
    left: 0;
  }
}

Found it here: https://css-tricks.com/snippets/css/orientation-lock/

回复 原文
长发绾君心 2024-09-21 16:03:05

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

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

You could use the screenSize.width and screenSize.height properties and detect when the width > height and then handle that situation, either by letting the user know or by adjusting your screen accordingly.

But the best solution is what @Doozer1979 says... Why would you override what the user prefers?

回复 原文
乖乖哒 2024-09-21 16:03:05 
#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>

#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>

回复 原文
~没有更多了~

关于作者

一向肩并

暂无简介

文章
评论
26 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

Promise

文章 0 评论 0

qq_lbRlsh

文章 0 评论 0

待＂谢繁草

文章 0 评论 0

yy2010hell

文章 0 评论 0

漫无边际

文章 0 评论 0

傲娇萝莉攻

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文