检测视口方向，如果方向是肖像显示警告消息通知用户的指示

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

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

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

非常感谢，丹

Answer 1

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

jQuery Mobile有一个事件处理这个属性的变化…如果你想警告，如果有人稍后旋转 – orientationchange

另外，一些谷歌search后，检查window.orientation （这是我相信测量度…

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上testing

Answer 3

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

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

Answer 4

你可以使用CSS3：

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

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

Answer 6

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

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

Answer 7

不要尝试固定window.orientation查询（0，90等不代表肖像，风景等）：

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

即使在iOS7上，取决于你如何进入浏览器0并不总是肖像

Answer 8

为了将所有这些优秀的评论应用于我的日常编码，为了保持所有应用程序之间的连续性，我决定在我的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"); } } 

Answer 9

经过一些实验后，我发现旋转方向感知设备将始终触发浏览器窗口的resize事件。 所以在你的resize处理程序只需调用一个函数，如：

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

Answer 10

获取方向（在任何时候在你的JS代码）通过

 window.orientation 

当window.orientation返回0或180那么你是在肖像模式 ，当返回90或270那么你在横向模式 。

Answer 11

我结合了两种解决scheme，对我来说工作得很好。

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

Answer 12

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

Answer 13

当方向改变时，iOS不会更新screen.width和screen.height 。 当它改变时，Android不会更新window.orientation 。

我对这个问题的解决scheme：

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

Answer 14

感谢tobyodavies引导的方式。

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

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

Answer 15

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

Answer 16

基于宽度/高度的比较来确定取向的另一种替代scheme：

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

您在“resize”事件中使用它：

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

Answer 17

这扩大了以前的答案。 我发现的最好的解决scheme是创build一个无害的CSS属性，只有在满足CSS3媒体查询时才会出现，然后为该属性提供JStesting。

所以，例如，在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的傻瓜）。 颜色声明可能很奇怪，所以你可能想要使用其他的东西，但是这是我发现用来testing它的最简单的方法。 然后，您可以使用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 + "!"); }); }); 

最好的部分是，在我写这个答案的时候，它看起来对桌面界面没有任何影响，因为他们（通常）不会（看起来）通过任何参数来定位页面。

Answer 18

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

Answer 19

我用于Android Chrome “The Screen Orientation API”

要查看当前的方向调用console.log（screen.orientation.type）（也许screen.orientation.angle）。

结果：portrait-primary | portrait-secondary | landscape-primary | 景观二次

下面是我的代码，我希望它会有帮助：

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

• 我只testingAndroid Chrome – 确定

Answer 20

iOS设备的JavaScript中的窗口对象具有可用于确定设备旋转的方向属性。 以下显示iOS设备（例如iPhone，iPad，iPod）在不同方向的值window.orientation。

这个解决scheme也适用于Android设备。 我检查了Android本机浏览器（互联网浏览器）和Chrome浏览器，甚至在旧版本。

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

Answer 21

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

Answer 22

这是我用的。

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

Answer 23

我不同意最被投票的答案。 使用screen而不是window

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

是正确的方法来做到这一点。 如果你用window.height计算，你会遇到Android的麻烦。 当键盘打开时，窗口缩小。 所以使用屏幕而不是窗口。

screen.orientation.type是一个很好的答案，但与IE浏览器。 https://caniuse.com/#search=screen.orientation

Answer 24

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

Answer 25

有一种方法可以检测用户是否使用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将被触发，当用户使用肖像模式时，会popup提醒。

Answer 26

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

Answer 27

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

Answer 28

或者你可以用这个..

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

Answer 29

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