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

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

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

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

非常感谢,丹

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

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

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

你也可以使用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

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

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

你可以使用CSS3:

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

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

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

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

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

不要尝试固定window.orientation查询(0,90等不代表肖像,风景等):

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

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

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

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

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

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

 window.orientation 

window.orientation返回0180那么你是在肖像模式 ,当返回90270那么你在横向模式

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

 window.addEventListener("orientationchange", function() { if (window.matchMedia("(orientation: portrait)").matches) { alert("PORTRAIT") } if (window.matchMedia("(orientation: landscape)").matches) { alert("LANSCAPE") } }, false); 
 //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"); } } 

当方向改变时,iOS不会更新screen.widthscreen.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事件。

感谢tobyodavies引导的方式。

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

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

它可以是-90(减90),而不是270。

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

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

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

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

这扩大了以前的答案。 我发现的最好的解决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 + "!"); }); }); 

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

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

我用于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 – 确定

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

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

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

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

这是我用的。

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

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

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

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

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

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

有一种方法可以检测用户是否使用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提醒。

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

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

或者你可以用这个..

 window.addEventListener("orientationchange", function() { if (window.orientation == "90" || window.orientation == "-90") { //Do stuff } }, false); 
 $(window).on("orientationchange",function( event ){ alert(screen.orientation.type) });