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

Question

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

Answer 1

好像比较难，涉及到调用安卓或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);
}

Answer 2

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

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

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

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