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

Question

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

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

所以基本上,我希望网站检测视口方向,如果方向是纵向,则显示警告消息,告知用户该页面在横向模式下最佳查看.

非常感谢,Dan

Answer 1

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

jQuery Mobile有一个事件来处理这个属性的更改...如果你想警告以后有人转动 - orientationchange

此外,经过一些谷歌搜索,退房orientationchange(我相信以度数衡量...

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上测试过.

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

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

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

Answer 7

为了将所有这些伟大的注释应用到我的日常编码中,为了我所有应用程序之间的连续性,我决定在我的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 8

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

不要尝试修复window.orientation查询(0,90等并不意味着肖像,风景等):

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

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

Answer 10

我不同意投票最多的答案。使用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 11

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

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

Answer 12

我结合了两个解决方案,它对我来说很好.

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

Answer 13

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