javascript - 检测视口方向，如果方向是纵向显示警告消息，建议用户使用说明

Question

我正在建立一个专门针对移动设备的网站。特别是有一个页面最好在横向模式下查看。

有没有办法检测访问该页面的用户是否以纵向模式查看它，如果是，则显示一条消息，通知用户该页面最好以横向模式查看？如果用户已经在横向模式下查看它，则不会出现任何消息。

所以基本上，我希望网站检测视口方向，如果方向是Portrait ，然后显示一条警告消息，建议用户最好在横向模式下查看此页面。

score 310 · Accepted Answer

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

jQuery Mobile 有一个事件来处理这个属性的变化......如果你想在有人稍后旋转时发出警告 -orientationchange

另外，在谷歌搜索之后，检查一下window.orientation（我相信这是以度数衡量的......）

编辑：在移动设备上，如果您打开键盘，则上述操作可能会失败，因此可以使用screen.availHeightand screen.availWidth，即使在打开键盘后也可以提供适当的高度和宽度。

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

score 206 · Accepted Answer

您也可以使用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 上测试。

score 108 · Accepted Answer

大卫沃尔什有一个更好的方法。

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

score 38 · Accepted Answer

您可以使用 CSS3 ：

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

score 22 · Accepted Answer

有几种方法可以做到这一点，例如：

检查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);
    });
});

score 12 · Accepted Answer

我认为更稳定的解决方案是使用屏幕而不是窗口，因为如果您要在台式计算机上调整浏览器窗口的大小，它可以是横向或纵向。

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

score 10 · Accepted Answer

为了将所有这些很棒的评论应用到我的日常编码中，为了我所有应用程序之间的连续性，我决定在我的 jquery 和 jquery 移动代码中使用以下内容。

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

score 9 · Accepted Answer

仅 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; } 
};

score 7 · Accepted Answer

不要尝试固定的 window.orientation 查询（0、90 等并不意味着纵向、横向等）：

http://www.matthewgifford.com/blog/2011/12/22/a-misconception-about-window-orientation/

即使在 iOS7 上，取决于您进入浏览器的方式 0 并不总是纵向的

score 6 · Accepted Answer

我不同意投票最多的答案。使用screen与不使用window

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

是正确的做法。如果你用计算window.height，你会在安卓上遇到麻烦。键盘打开时，窗口缩小。所以使用屏幕而不是窗口。

这screen.orientation.type是一个很好的答案，但使用 IE。 https://caniuse.com/#search=screen.orientation

score 5 · Accepted Answer

经过一些实验，我发现旋转方向感知设备总是会触发浏览器窗口的resize事件。因此，在您的调整大小处理程序中，只需调用如下函数：

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

score 5 · Accepted Answer

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

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

score 5 · Accepted Answer

5

$(window).on("orientationchange",function( event ){
    alert(screen.orientation.type)
});

于 2017-07-18T10:08:47.320 回答

score 4 · Accepted Answer

当方向改变时，screen.widthiOS不会更新。当它改变时，screen.heightAndroid 不会更新。window.orientation

我对这个问题的解决方案：

var isAndroid = /(android)/i.test(navigator.userAgent);

if(isAndroid)
{
    if(screen.width < screen.height){
        //portrait mode on Android
    }
} else {
    if(window.orientation == 0){
        //portrait mode iOS and other devices
    }
}

您可以使用以下代码在 Android 和 iOS 上检测到这种方向变化：

var supportsOrientationChange = "onorientationchange" in window,
    orientationEvent = supportsOrientationChange ? "orientationchange" : "resize";

window.addEventListener(orientationEvent, function() {
    alert("the orientation has changed");
}, false);

如果onorientationchange不支持该事件，则绑定的事件将是该resize事件。

score 3 · Accepted Answer

通过获取方向（在您的 js 代码中随时）

window.orientation

window.orientation返回时0，180您处于纵向模式，返回时，90您270处于横向模式。

score 3 · Accepted Answer

如果您有最新的浏览器window.orientation可能无法正常工作。在这种情况下，使用以下代码获取角度 -

var orientation = window.screen.orientation.angle;

这仍然是一项实验性技术，您可以在此处检查浏览器兼容性

score 2 · Accepted Answer

//see also http://stackoverflow.com/questions/641857/javascript-window-resize-event
//see also http://mbccs.blogspot.com/2007/11/fixing-window-resize-event-in-ie.html
/*
Be wary of this:
While you can just hook up to the standard window resize event, you'll find that in IE, the event is fired once for every X and once for every Y axis movement, resulting in a ton of events being fired which might have a performance impact on your site if rendering is an intensive task.
*/

//setup 
window.onresize = function(event) {
    window_resize(event);
}

//timeout wrapper points with doResizeCode as callback
function window_resize(e) { 
     window.clearTimeout(resizeTimeoutId); 
     resizeTimeoutId = window.setTimeout('doResizeCode();', 10); 
}

//wrapper for height/width check
function doResizeCode() {
    if(window.innerHeight > window.innerWidth){
        alert("Please view in landscape");
    }
}

score 2 · Accepted Answer

基于宽度/高度的比较确定方向的另一种选择：

var mql = window.matchMedia("(min-aspect-ratio: 4/3)");
if (mql.matches) {
     orientation = 'landscape';
}

您在“调整大小”事件中使用它：

window.addEventListener("resize", function() { ... });

score 2 · Accepted Answer

这是我发现的最佳方法，基于 David Walsh 的文章（检测移动设备上的方向变化）

if ( window.matchMedia("(orientation: portrait)").matches ) {  
   alert("Please use Landscape!") 
}

解释：

Window.matchMedia()是一种本机方法，允许您定义媒体查询规则并在任何时间点检查其有效性。

onchange我发现在此方法的返回值上附加一个侦听器很有用。例子：

var mediaQueryRule = window.matchMedia("(orientation: portrait)")
mediaQueryRule.onchange = function(){ alert("screen orientation changed") }

score 1 · Accepted Answer

感谢 tobyodavies 的指导。

要实现基于移动设备方向的警报消息，您需要在function setHeight() {

if(window.innerHeight > window.innerWidth){
    alert("Please view in landscape");
}

score 1 · Accepted Answer

1

它可以是 -90（负 90）而不是 270。

于 2013-07-14T17:09:22.727 回答

score 1 · Accepted Answer

这扩展了先前的答案。我发现的最佳解决方案是创建一个仅在满足 CSS3 媒体查询时才出现的无害 CSS 属性，然后对该属性进行 JS 测试。

因此，例如，在 CSS 中，您将拥有：

@media screen only and (orientation:landscape)
{
    //  Some innocuous rule here
    body
    {
        background-color: #fffffe;
    }
}
@media screen only and (orientation:portrait)
{
    //  Some innocuous rule here
    body
    {
        background-color: #fffeff;
    }
}

然后转到 JavaScript（我正在使用 jQuery 进行有趣的操作）。颜色声明可能很奇怪，所以您可能想使用其他东西，但这是我发现的最简单的测试方法。然后，您可以使用 resize 事件来进行切换。把它们放在一起：

function detectOrientation(){
    //  Referencing the CSS rules here.
    //  Change your attributes and values to match what you have set up.
    var bodyColor = $("body").css("background-color");
    if (bodyColor == "#fffffe") {
        return "landscape";
    } else
    if (bodyColor == "#fffeff") {
        return "portrait";
    }
}
$(document).ready(function(){
    var orientation = detectOrientation();
    alert("Your orientation is " + orientation + "!");
    $(document).resize(function(){
        orientation = detectOrientation();
        alert("Your orientation is " + orientation + "!");
    });
});

最好的部分是，在我撰写此答案时，它似乎对桌面界面没有任何影响，因为它们（通常）不会（似乎）将任何方向参数传递给页面。

score 1 · Accepted Answer

我用于 Android Chrome “屏幕方向 API”

查看当前方向调用 console.log(screen.orientation.type) （可能还有 screen.orientation.angle）。

结果：肖像-初级 | 肖像中学 | 景观-主要| 高分辨率照片| CLIPARTO 景观中学

下面是我的代码，希望对你有帮助：

var m_isOrientation = ("orientation" in screen) && (typeof screen.orientation.lock == 'function') && (typeof screen.orientation.unlock == 'function');
...
if (!isFullscreen()) return;
screen.orientation.lock('landscape-secondary').then(
    function() {
        console.log('new orientation is landscape-secondary');
    },
    function(e) {
        console.error(e);
    }
);//here's Promise
...
screen.orientation.unlock();

我只测试了 Android Chrome - 好的

score 1 · Accepted Answer

有一种方法可以检测用户是否使用screen.orientation

只需使用以下代码：

screen.orientation.onchange = function () {
     var type = screen.orientation.type;
     if (type.match(/portrait/)) {
         alert('Please flip to landscape, to use this app!');
     }
}

现在，onchange当用户翻转设备时会被触发，当用户使用纵向模式时会弹出警报。

score 1 · Accepted Answer

screen.orientation.addEventListener("change", function(e) {
 console.log(screen.orientation.type + " " + screen.orientation.angle);
}, false);

score 1 · Accepted Answer

iOS 设备上 JavaScript 中的 window 对象具有一个方向属性，可用于确定设备的旋转方向。下面显示了不同方向的 iOS 设备（例如 iPhone、iPad、iPod）的值 window.orientation。

此解决方案也适用于 android 设备。我检查了 android 本机浏览器（互联网浏览器）和 Chrome 浏览器，即使在旧版本中也是如此。

function readDeviceOrientation() {                      
    if (Math.abs(window.orientation) === 90) {
        // Landscape
    } else {
        // Portrait
    }
}

score 1 · Accepted Answer

这就是我使用的。

function getOrientation() {

    // if window.orientation is available...
    if( window.orientation && typeof window.orientation === 'number' ) {

        // ... and if the absolute value of orientation is 90...
        if( Math.abs( window.orientation ) == 90 ) {

              // ... then it's landscape
              return 'landscape';

        } else {

              // ... otherwise it's portrait
              return 'portrait';

        }

    } else {

        return false; // window.orientation not available

    }

}

执行

window.addEventListener("orientationchange", function() {

     // if orientation is landscape...
     if( getOrientation() === 'landscape' ) {

         // ...do your thing

    }

}, false);

score 1 · Accepted Answer

有些设备不提供orientationchange事件，但会触发窗口的调整大小事件：

// Listen for resize changes
window.addEventListener("resize", function() {
    // Get screen size (inner/outerWidth, inner/outerHeight)

}, false);

没有orientationchange事件那么明显，但效果很好。请在这里查看

score 0 · Accepted Answer

<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <title>Rotation Test</title>
  <link type="text/css" href="css/style.css" rel="stylesheet"></style>
  <script src="js/jquery-1.5.min.js" type="text/javascript"></script>
  <script type="text/javascript">
        window.addEventListener("resize", function() {
            // Get screen size (inner/outerWidth, inner/outerHeight)
            var height = $(window).height();
            var width = $(window).width();

            if(width>height) {
              // Landscape
              $("#mode").text("LANDSCAPE");
            } else {
              // Portrait
              $("#mode").text("PORTRAIT");
            }
        }, false);

  </script>
 </head>
 <body onorientationchange="updateOrientation();">
   <div id="mode">LANDSCAPE</div>
 </body>
</html>

score 0 · Accepted Answer

需要注意的一件事是，如果您不在移动设备上window.orientation，它将返回。undefined因此，检查方向的好功能可能如下所示，其中x是window.orientation：

//check for orientation
function getOrientation(x){
  if (x===undefined){
    return 'desktop'
  } else {
    var y;
    x < 0 ? y = 'landscape' : y = 'portrait';
    return y;
  }
}

像这样称呼它：

var o = getOrientation(window.orientation);
window.addEventListener("orientationchange", function() {
  o = getOrientation(window.orientation);
  console.log(o);
}, false);

score 0 · Accepted Answer

或者你可以用这个..

window.addEventListener("orientationchange", function() {
    if (window.orientation == "90" || window.orientation == "-90") {
        //Do stuff
    }
}, false);

javascript - 检测视口方向，如果方向是纵向显示警告消息，建议用户使用说明

31 回答 31

Related

Reference