Определить ориентацию телефона под нагрузкой

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

directionINIT должен вызываться при загрузке страницы или завершении DOM (или внизу страницы)

где getHeight () и getWidth () должны быть простыми функциями, которые возвращают ширину / высоту окна в числовой форме.