检测负载时的手机方向

发布于 2024-11-30 04:30:54 字数 79 浏览 0 评论 0原文

是否可以在页面加载时使用 Javascript 检查。我知道您可以检测到方向的变化,但是是否可以立即检查手机处于什么状态?

谢谢

Is this possible to check with Javascript on page load. I know you can detect a change in orientation but is it possible to check what state the phone is in straight away?

Thanks

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

残月升风 2024-12-07 04:30:55

您可以检查视口宽度和高度,看看哪一个更大:

var isLandscapeMode = window.innerWidth > window.innerHeight;

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

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

(更新的代码)

You could check the viewport width and height and see which one is larger:

var isLandscapeMode = window.innerWidth > window.innerHeight;

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

For a more in-depth discussion of viewport sizes on mobile devices, see
http://www.quirksmode.org/mobile/viewports2.html

(Updated code)

甜宝宝 2024-12-07 04:30:55

你可以这样做...

 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() 应该是简单的函数,以数字形式返回窗口的宽度/高度。

You can do this...

 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 should be called on page load or DOM complete (or at the bottom of the page )

where getHeight() and getWidth() should be simple functions that return the window's width / height in number form.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文