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

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

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


当前回答

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

其他回答

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

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

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

检查窗口。价值取向 比较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);
    });
});

我用的是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 -好的

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

var orientation = window.screen.orientation.angle;

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

我把两个解决方案结合起来,对我来说效果很好。

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