检测视口方向(如果方向为纵向显示警报消息,建议用户进行说明)


195

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

有没有一种方法可以检测访问该页面的用户是否正在以“纵向”模式查看该页面,如果显示,则显示一条消息,通知用户该页面在横向模式下的浏览效果最佳?如果用户已经在横向模式下查看它,则不会出现任何消​​息。

因此,基本上,我希望站点检测视口的方向,如果方向是纵向,则显示一条警告消息,通知用户该页面最好在横向模式下查看。

Answers:


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

jQuery Mobile有一个处理此属性更改的事件……如果您想在以后有人旋转时发出警告, orientationchange

另外,经过一番谷歌搜索后,签出window.orientation(我相信这是以度为单位...)


6
不,不幸的是没有。但是,以下脚本确实起作用:if(window.innerHeight> window.innerWidth){alert(“请以横向查看”); }

8
我使问题过于复杂。这很棒。很简单。

76
在许多设备上,当显示键盘时,availableWidth将大于高度,从而错误地给出了横向方向。
Pierre

1
如果与orientationchange事件结合使用,则无法使用。它将显示旧的方向,而不是新的方向。这个答案orientationchange事件结合起来效果很好。
唐老鸭


162

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


3
不过,对该功能的支持还很薄弱:caniuse.com/#feat=matchmedia
Ashitaka 2013年

2
在Firefox for Android中,只有在对我准备好DOM ready事件之后才能正常工作。
2015年

13
现在对此的支持更加强大。现在的答案似乎比公认的答案更为可靠。
2016年

2
这与该(链接)溶液小心stackoverflow.com/questions/8883163/...
dzv3

2
现在,这是正确的答案。此功能完全支持所有相关浏览器。
Telarian

97

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


2
在Nexus 10上,但我对其他Android 10“平板电脑一无所知,这些值是向后的。例如,当设备处于横向而不是纵向时,则返回0。 ve测试过
内森

8
方向0被指定为设备的“自然”方向,因此取决于供应商。它可能是肖像还是风景……
Pierre

在iframe中的ipad上没有警告任何内容
Darius.V 2014年

2
对于设备的检测方向mod,这不是一个好的解决方案。因为它们的返回值取决于自然的设备方向。例如三星7'片剂纵向视图返回90,但是,对于肖像关系4他们返回0
Dexter_ns88

3
在此链接上:notes.matthewgifford.com/… 作者展示了来自不同制造商的不同设备,它们对风景和肖像有不同的解释。因此,您无法真正依靠不同的报告值。
霓虹灯Warge '16

36

您可以使用CSS3:

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

对我最好的答案,因为您不需要倾听者即可改变方向。尽管我将它与modernizr结合使用来检测它是否是触摸设备,但由于在台式机或笔记本电脑的屏幕上没有意义。对于具有触摸功能的此类屏幕,仍然不行……
Esger 2013年

4
与javascript不相关。OP需要JavaScript解决方案。
easwee 2014年

10
不,他想显示一条消息,您可以使用display:none然后使用display:block来显示某些内容。
Thomas Decaux 2014年

2
此CSS检查提供什么样的支持?
克里斯(ChrisF)2014年

1
我不知道,但是我没有找到不支持它的手机。在旧的Android上,它似乎也坏了,当键盘显示出来时,有时会触发媒体查询。
Thomas Decaux 2014年

20

有几种方法可以做到这一点,例如:

  • 检查window.orientation
  • 比较innerHeightinnerWidth

您可以采用以下方法之一。


检查设备是否处于纵向模式

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

10

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

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

在IE 10,Firefox 23和Chrome 29(所有台式机浏览器)中均可使用。
Jakob Jenkov

1
所有主要的浏览器都支持它。IE 7也是如此
artnikpro


@Duncan否。它可以在手机上使用。这是一种非常古老的方法,并且在旧的Safari和android浏览器中受支持。对于视网膜,它可能不太准确,但是对于检测视口方向,它应该可以正常工作
artnikpro

1
@artnikpro我昨天测试了它,看来Safari返回的物理屏幕尺寸忽略了方向。因此screen.width始终是屏幕的物理宽度。
Duncan Hoggan

9

为了将所有这些出色的注释应用到我的日常编码中,以确保所有应用程序之间的连续性,我决定在我的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");
  }
}


5

经过一些实验,我发现旋转方向感应设备将始终触发浏览器窗口的resize事件。因此,在您的大小调整处理程序中,只需调用以下函数:

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

1
参见上文,了解为什么90 =>横向不是您可以在不同设备上依赖的东西。
克里斯(ChrisF)2014年

5

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

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

5

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

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

是正确的方法。如果使用计算window.height,您将在Android上遇到麻烦。打开键盘时,窗口会缩小。因此,请使用屏幕而不是窗口。

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


4

通过(在您的js代码中的任何时候)获取方向

window.orientation

window.orientation收益0180那么你在纵向模式,返回时90还是270那么你在横向模式


1
但是它不会返回270,而是返回-90。
Felipe Correa 2015年

@FelipeCorrea答案是2岁!
Sliq 2015年

2
我正在澄清以使其对新访客有效。顺便说一句,它帮助了我。
费利佩·科雷亚

window.orientation已弃用
Jonny

4

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

1
我知道我不应该这样做,但是我不得不为此表示感谢,这是一个很好的解决方案。
FalsePozitive


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

2

根据宽度/高度的比较来确定方向的另一种方法:

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

您可以在“调整大小”事件上使用它:

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

2

iOS不会更新screen.widthscreen.height方向更改时。window.orientation更改时Android不会更新。

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

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事件。


2

如果您拥有最新的浏览器,则window.orientation可能无法使用。在这种情况下,请使用以下代码获取角度-

var orientation = window.screen.orientation.angle;

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


1

感谢tobyodavies的指导。

要获得基于移动设备方向的警报消息,您需要在 function setHeight() {

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


1

这是先前答案的扩展。我发现的最佳解决方案是创建一个无害的CSS属性,该属性仅在满足CSS3媒体查询时才会显示,然后对该属性进行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 + "!");
    });
});

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


值得注意的是,Windows 10和Edge可能为此付出了很大的努力-我尚未在新平台上进行大量测试,但至少在最初,它似乎正在向浏览器提供方向数据。仍然可以围绕它构建您的网站,但这绝对是要注意的事情。
乔什C

1

这是我根据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") }

1

我使用了Android Chrome浏览器的“屏幕方向API”

要查看当前方向,请调用console.log(screen.orientation.type)(也可以是screen.orientation.angle)。

结果:人像原| 肖像中学| 风景名胜| 风景中学

以下是我的代码,希望对您有所帮助:

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浏览器-好的

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

尽管此代码段可以解决问题,但提供说明确实有助于提高您的帖子质量。请记住,您将来会为读者回答这个问题,而这些人可能不知道您提出代码建议的原因。也请尽量不要在代码中加入解释性注释,因为这会降低代码和解释的可读性!
再见StackExchange,

该答案不能解决原始问题中的问题。它显示了如何记录方向更改,但没有显示如何仅以一种特定方向显示消息。
朱利安

1

iOS设备上的JavaScript中的window对象具有direction属性,该属性可用于确定设备的旋转。以下显示了iOS设备(例如iPhone,iPad,iPod)在不同方向上的值window.orientation。

该解决方案也适用于android设备。我在Android本机浏览器(Internet浏览器)和Chrome浏览器中都进行了检查,即使是旧版本也是如此。

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

1

这就是我用的。

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

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

0

有一种方法可以检测用户是否使用以下方式将设备切换为纵向模式 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当用户翻转设备时将被触发,并且当用户使用纵向模式时警报将弹出。


0

需要注意的一件事window.orientation是,undefined如果您不在移动设备上,它将返回。因此,一个良好的功能检查的方向可能是这样的,在那里xwindow.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);

0

或者您也可以使用它。

window.addEventListener("orientationchange", function() {
    if (window.orientation == "90" || window.orientation == "-90") {
        //Do stuff
    }
}, false);
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.