检测视口方向，如果方向为竖屏，则显示警告消息，提示用户进行操作说明。

Question

我正在建设一个特别为手机设备设计的网站。有一个页面最好在横屏模式下查看。

是否有一种方法来检测访问该页面的用户是否处于纵向模式，并且如果是，则显示消息提示用户最好在横向模式下查看该页面？如果用户已经在横向模式下查看它，则不会出现任何消息。

因此，基本上，我希望该网站能够检测视口的方向，如果方向为 纵向 ，则显示警告消息，建议用户在 横向 模式下查看此页面。

- Dan

Answer 1

if(window.innerHeight > window.innerWidth){
    alert("Please use Landscape!");
}

jQuery Mobile有一个事件可以处理此属性的更改...如果您想在稍后旋转时发出警告，可以使用orientationchange。

此外，在一些搜索之后，请查看window.orientation（我相信它是用度数来测量的......）

编辑：在移动设备上，如果您打开键盘，则上述方法可能会失败，因此可以使用screen.availHeight和screen.availWidth，这可以在键盘打开后仍然提供正确的高度和宽度。

if(screen.availHeight > screen.availWidth){
    alert("Please use Landscape!");
}

- tobyodavies

---

抱歉，很遗憾不能。不过，以下代码是有效的：if(window.innerHeight > window.innerWidth){ alert("请横屏查看"); } - Dan

我当时把问题想得太复杂了。这很好，原来很简单。 - user657199

在许多设备上，当键盘显示时，可用宽度会大于高度，错误地给出横向方向。 - Pierre

它不起作用是因为如果键盘被显示，window.innerHeight < window.innerWidth 是正确的，但你处于纵向模式。 - Stefdelec

窗口方向(window.orientation)已被弃用。https://developer.mozilla.org/zh-CN/docs/Web/API/Window/orientation - kluverua

Answer 2

你也可以使用window.matchMedia，我个人更喜欢使用它，因为它与 CSS 语法非常相似：

if (window.matchMedia("(orientation: portrait)").matches) {
   // you're in PORTRAIT mode
}

if (window.matchMedia("(orientation: landscape)").matches) {
   // you're in LANDSCAPE mode
}

在iPad 2上进行测试。

- crmpicco

---

那个功能的支持有点弱：http://caniuse.com/#feat=matchmedia - Ashitaka

在我的情况下，仅在 DOM 准备就绪事件之后，Firefox for Android 才能正常工作。 - Inversion

现在对此的支持更加强烈。现在这似乎是比被接受的回答更为稳健的答案。 - JonK

注意这个链接提供的解决方案。https://dev59.com/P2ox5IYBdhLWcg3w74q2 - Diego Zacarias

现在这个回答是正确的。此功能在所有相关浏览器上都有完全支持。 - jarrodwhitley

Answer 3

David Walsh 的方法更好，而且更直接。

// Listen for orientation changes
window.addEventListener("orientationchange", function() {
  // Announce the new orientation number
  alert(window.orientation);
}, false);

在这些变化期间，window.orientation属性可能会发生变化。0表示竖屏视图，-90表示设备向右横向旋转，90表示设备向左横向旋转。

http://davidwalsh.name/orientation-change

- Jatin

---

在Nexus 10上，我不知道其他Android 10英寸平板电脑是否也是如此，但值是颠倒的。也就是说，在横屏模式下返回0，而不是竖屏模式。但是，tobyodavies在上面给出的答案似乎在我测试过的所有设备上都有效。 - Nathan

方向0被认为是设备的“自然”方向，因此取决于供应商，可能为纵向或横向。 - Pierre

这不是检测设备方向模式的好解决方案。因为返回值取决于设备的自然方向。例如，在三星7英寸平板电脑上，纵向视图返回90，而在Nexus 4上，纵向视图返回0。 - Dexter_ns88

在这个链接中：https://notes.matthewgifford.com/a-misconception-about-window-orientation-7231235a94c2#.llqebngde作者展示了不同制造商的设备对横屏和竖屏有不同的解释，因此报告的值也不同，你不能真正依赖它们。 - Neon Warge

orientationchange已被弃用。 - amarinediary

Answer 4

您可以使用CSS3：

@media screen and (orientation:landscape)
{
   body
   {
      background: red;
   }
}

- Thomas Decaux

---

与 JavaScript 无关。OP 需要 JavaScript 解决方案。 - easwee

不，他想展示一条信息，您可以使用"display:none"隐藏它，然后使用"display:block"来显示它。 - Thomas Decaux

这个CSS检查工具的支持如何？ - ChrisF

我不知道，但我没有找到一个不支持它的手机。另外，在旧版Android上似乎存在问题，当键盘弹出时有时会触发媒体查询。 - Thomas Decaux

不幸的是，正如Thomas所说，我发现在iPhone和Android上当键盘弹出时会触发媒体查询，尽管这很棒。如果有人有答案，我在这里提出了这个问题：http://stackoverflow.com/questions/33357414/css-media-query-to-detect-landscape-only-on-mobile-iphone-android - svnm

Answer 5

有几种方法可以实现，例如：

• 检查window.orientation值
• 比较innerHeight和innerWidth

您可以选择下面的其中一种方法。

---

检查设备是否处于竖屏模式

function isPortrait() {
    return window.innerHeight > window.innerWidth;
}

检查设备是否处于横屏模式

function isLandscape() {
    return (window.orientation === 90 || window.orientation === -90);
}

使用示例

if (isPortrait()) {
    alert("This page is best viewed in landscape mode");
}

如何检测设备屏幕的旋转方向？

---

$(document).ready(function() {
    $(window).on('orientationchange', function(event) {
        console.log(orientation);
    });
});

- martynas

Answer 6

我认为更稳定的解决方案是使用屏幕而不是窗口，因为如果你在桌面电脑上调整浏览器窗口大小，它可以同时是横屏或竖屏。

if (screen.height > screen.width){
    alert("Please use Landscape!");
}

- artnikpro

---

这在IE 10、Firefox 23和Chrome 29（所有桌面浏览器）中都可以运行。 - Jakob Jenkov

所有主要的浏览器都支持它。包括IE 7。 - artnikpro

不过，这并不是标准：https://developer.mozilla.org/zh-CN/docs/Web/API/Window.screen#Specification - fjsj

@Duncan 不是的，它可以在移动设备上使用。这是一种相当古老的方法，支持旧版 Safari 和 Android 浏览器。虽然在检测视口方向时可能不太准确，但应该可以正常工作。 - artnikpro

@artnikpro 我昨天测试了一下，似乎Safari返回物理屏幕尺寸而忽略方向。因此，screen.width始终是屏幕的物理宽度。 - Duncan Hoggan

Answer 7

仅限于使用CCS

@media (max-width: 1024px) and (orientation: portrait){ /* tablet and smaller */
  body:after{
    position: absolute;
    z-index: 9999;
    width: 100%;
    top: 0;
    bottom: 0;
    content: "";
    background: #212121 url(http://i.stack.imgur.com/sValK.png) 0 0 no-repeat; /* replace with an image that tells the visitor to rotate the device to landscape mode */
    background-size: 100% auto;
    opacity: 0.95;
  }
}

在某些情况下，您可能希望添加一小段代码，在访问者旋转设备后重新加载页面，以便正确呈现CSS：

window.onorientationchange = function() { 
    var orientation = window.orientation; 
        switch(orientation) { 
            case 0:
            case 90:
            case -90: window.location.reload(); 
            break; } 
};

- cptstarling

---

我知道我不应该这样做，但我必须说谢谢，这是一个很好的解决方案。 - FalsePozitive

截至2021年，所有现代浏览器都支持它。https://caniuse.com/?search=media%20orientation - Dr. Freddy Dimethyltryptamine

Answer 8

为了将所有这些优秀的评论应用于我的日常编写中，以确保所有应用程序之间的连续性，我已决定在我的jQuery和jQuery Mobile代码中使用以下内容。

window.onresize = function (event) {
  applyOrientation();
}

function applyOrientation() {
  if (window.innerHeight > window.innerWidth) {
    alert("You are now in portrait");
  } else {
    alert("You are now in landscape");
  }
}

- dLindley

Answer 9

请勿尝试使用固定的window.orientation查询（0、90等不表示纵向、横向等）：

即使在iOS7上，取决于您如何进入浏览器，0也不总是代表纵向。请参考此处了解更多信息。

- kev666n

---

我不认为这还是正确的。 - oldboy

仍然是真的...不能仅从orientation.angle来做出任何假设。你还需要检查orientation.type，这使得它有点复杂。 - Scalway

Answer 10

我将两种解决方案结合起来，对我来说效果很好。

window.addEventListener("orientationchange", function() {                   
    if (window.matchMedia("(orientation: portrait)").matches) {
       alert("PORTRAIT")
     }
    if (window.matchMedia("(orientation: landscape)").matches) {
      alert("LANSCAPE")
     }
}, false);

- ARTniyet