我正在为移动设备建立一个网站。有一页特别适合在横屏模式下浏览。

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

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


当前回答

获得方向(在任何时间在你的js代码)通过

window.orientation

当窗口。方向返回0或180则处于竖屏模式,返回90或270则处于横屏模式。

其他回答

感谢托比戴维斯的指引。

要实现基于移动设备方向的警报消息,您需要在函数setHeight(){中实现以下脚本

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

我认为更稳定的解决方案是使用屏幕而不是窗口,因为如果你要调整桌面电脑上的浏览器窗口大小,它可以是横向或纵向的。

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

如果您有最新的浏览器窗口。定向可能行不通。在这种情况下,使用下面的代码获取角度

var orientation = window.screen.orientation.angle;

这仍然是一个实验技术,你可以在这里检查浏览器兼容性

大卫·沃尔什的方法更好,更切中要害。

// Listen for orientation changes
window.addEventListener("orientationchange", function() {
  // Announce the new orientation number
  alert(window.orientation);
}, false);

在这些更改期间,窗口。方向属性可能会改变。值为0表示纵向视图,-90表示设备横向向右旋转,90表示设备横向向左旋转。

http://davidwalsh.name/orientation-change

这是对之前答案的扩展。我发现的最好的解决方案是创建一个无害的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 + "!");
    });
});

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