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

Posted 2023-05-09

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

【英文标题】：How to change device orientation without CSS and only with JavaScript or jQuery/jQueryMobile?

【发布时间】：2017-02-03 20:54:32

【问题描述】：

我有以下 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>

当用户点击页面上的<div> HTML 元素时，我想做的是仅使用 javascript、jQuery 或 jQueryMobile 更改设备方向，而不使用 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。

有没有办法在不使用本机代码的情况下做到这一点？任何提示/帮助表示赞赏，在此先感谢！

【问题讨论】：

“不使用css”和“不使用本机代码”是什么意思？ - 你为什么还要控制方向？这么多令人困惑的事情！

基本上，当我单击该 DIV 元素时，会出现一个弹出窗口，但我希望它以横向模式显示，并且页面的方向以相同的横向模式显示。因此，当我单击 HTML 元素时，我需要一种方法来更改页面的方向。我需要一种不使用 CSS 的方法，因为我希望它运行得更快而无需处理额外的 CSS 代码，而且我不知道 Objective-c 或其他移动编程语言。我正在使用带有 Cordova 框架的 jQuery Mobile 进行开发。

@bookw0rm 如果你使用的是cordova，试试这个插件npmjs.com/package/cordova-plugin-screen-orientation

【参考方案1】：

我在 cmets 中看到您正在使用 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);