Question

我有以下HTML结构：

<div data-role="page" id="pageOne">
        <div data-role="header">
            <h1>Titlu Aplicatie</h1>
        </div>
        <div data-role="main" class="ui-content">
            <h1>Titlu Continut</h1>
            <h2>Subtitlu Continut</h2>
            <p>Text Continut aplicatie</p>
            <div class="change">La click pe acest element schimbam orientarea dispozitivului !</div>
        </div>
        <div data-role="footer">
            <h1>Footer Aplicatie</h1>
        </div>
</div>

我想要做的是仅使用JavaScript，jQuery或jQueryMobile更改设备方向，并在用户点击页面上的<div> HTML元素时不使用CSS。

我知道如何使用CSS这样做：

<script>
        $(document).ready(function () {
            $("div.change").on("click", function () {
                function reorient(e) {
                    var portrait = (window.orientation % 90 == 0);
                    $("body").css("-webkit-transform", !portrait ? "rotate(-90deg)" : "");
                }
                window.onorientationchange = reorient;
                window.setTimeout(reorient, 0);
            });
        });
    </script>

但我想用JavaScript，jQuery / jQuery Mobile来做。

有没有机会在没有使用本机代码的情况下做到这一点？任何提示/帮助都表示赞赏，提前谢谢！

Answer 1

我在评论中看到你使用Cordova开发移动应用程序。所以我的建议是使用下面的Cordova插件进行屏幕定位。

https://www.npmjs.com/package/cordova-plugin-screen-orientation

安装插件后，现在您可以在使用

单击div时更改设备方向

$("div").on("click",function(){
    screen.lockOrientation('landscape');
});

插件中还有其他用法，例如

// allow user rotate 
screen.unlockOrientation();

// access current orientation 
console.log('Orientation is ' + screen.orientation);

如何在没有CSS且仅使用JavaScript或jQuery / jQueryMobile的情况下更改设备方向？

1 个答案: