Question

这是否可以在页面加载时使用Javascript进行检查。我知道您可以检测到方向的变化，但是可以立即检查手机的状态吗？

由于

Answer 1

您可以检查视口宽度和高度，看看哪个更大：

var isLandscapeMode = window.innerWidth > window.innerHeight;

if (isLandscapeMode) {
  // fit page to wide orientation here...
}

有关移动设备上视口大小的更深入讨论，请参阅 http://www.quirksmode.org/mobile/viewports2.html

（更新代码）

Answer 2

你可以这样做......

 var currOrientation= '';
/************************
* Changes the (obj) element's class, to 
* -vrt (vertical)
* -hrz (horizontal)
* depending on its width
*************************/
var orientation = function( obj ){
    var w = getWidth(),
        h = getHeight();

    if( w <= h && currOrientation !== 'vrt' ){
        obj.className = 'vrt';
        currOrientation = 'vrt';
    }
    else if( currOrientation !== 'hrz' ) {
        obj.className = 'hrz';
        currOrientation = 'hrz';
    }
}
/************************
* Binding a repeating timer
************************/
var orientationINIT = function() {
    var content;
    if( (content = document.getElementsByTagName('body')[0]) != undefined ){
        orientation( content );

        var Orient = setInterval( function() {
            orientation( content );
        }, 500 ); //each 500ms a call for orientation change
    }
}

orientationINIT应在页面加载或DOM完成时（或在页面底部）调用

其中getHeight（）和getWidth（）应该是以数字形式返回窗口宽度/高度的简单函数。

在加载时检测手机方向

2 个答案: