首页 > 大家好,求助关于移动端重力感应问题。

大家好,求助关于移动端重力感应问题。

我的移动端网页如果默认正常打开竖着看图片很小,但是如果打开重力感应器横着看效果就会好很多,请问用js或者其他可以控制移动端网页默认是横着的吗?谢谢。


一般看到的实现是这样的:

  1. 假设希望页面在横屏下显示

  2. 那么页面打开时,通过orientation来判断屏幕是横着还是竖着

  3. 判断如果是横屏,则显示页面;如果不是横屏,则不显示页面内容,而是显示一个提示“请在横屏下浏览此页面”


好像比较难,涉及到调用安卓或iOS的API了应该。
下面这个方法可以判断是横屏还是竖屏,但是似乎并不能强制更改window.orientation的值来实现旋转屏幕。

    function orient() {
        if (window.orientation == 0 || window.orientation == 180) {
            alert('竖屏');
            $("body").attr("class", "portrait");
            orientation = 'portrait';
            return false;
        }
        else if (window.orientation == 90 || window.orientation == -90) {
            alert('横屏');
            $("body").attr("class", "landscape");
            orientation = 'landscape';
            return false;
        }
    }
   
    $(window).bind( 'orientationchange', function(e){
        orient();
    });

     $(function(){
        orient();
    });

如果页面元素比较简单的话,或许可以尝试使用CSS3旋转90度来实现伪横屏,不过一般效果都不大好。

body{
    -webkit-transform:rotate(90deg);
    transform:rotate(90deg);
}
【热门文章】
【热门文章】