移动屏幕旋转解决方法

红太狼 2022-07-30 14:55 168阅读 0赞

禁止用户屏幕旋转。

这点可以肯定的说是做不到的，之前因为有项目需要禁止屏幕旋转，所以网上查阅了大量的资料，发现根本没有解决办法，在移动版webkit中根本做不到。苹果api也说明了，我们为了让用户在safari中正常的浏览网页，我们必须保证用户的设备处于任何一个方位时，safari都能够正常的显示网页内容（也就是自适应），所以我们禁止开发者阻止浏览器的orientationchange事件，所以ios是禁止阻止orientationchange事件的，而Android也一样，也是无法禁止屏幕旋转，所以在webapp里是做不到了。但是可以利用orientationchange事件判断方向，横屏时的显示方式与竖屏时的显示方式，写成两种样式。

html部分:

<div class="landscape-tips" style="display: none"> 为了更好的视觉体验，请在竖屏下进行操作。 </div>

js部分:

<script>
        //横竖屏提示
        window.addEventListener("onorientationchange" in window ? "orientationchange" : "resize", function() {
            if (window.orientation === 180 || window.orientation === 0) {
                //options.orientationchange('portrait');
                $(".wrapper").show();
                $(".landscape-tips").hide();
            }
            if (window.orientation === 90 || window.orientation === -90 ){
      //横屏时
                //options.orientationchange('landscape')
                $(".wrapper").hide();
                $(".landscape-tips").show();
            }
        }, false);
    </script>

发表评论取消回复

表情：

评论列表（有 0 条评论，168人围观）

还没有评论，来说两句吧...

相关阅读

相关 IOS6屏幕旋转

//1、首先在appDelegate中，把view添加到window中有两种方式、 self.window.rootViewCon

浅浅的花香味﹌/ 2023年10月18日 10:44/ 0 赞/ 7 阅读

相关 IOS锁定屏幕旋转

- (BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)toInterfaceOr

绝地灬酷狼/ 2023年10月16日 23:18/ 0 赞/ 33 阅读

相关 Chart.js 旋转支持屏幕旋转与窗口旋转

<html> <head> <meta name="viewport" content="width=device-width, initial

谁借莪１个温暖的怀抱￠/ 2023年01月10日 14:51/ 0 赞/ 128 阅读

相关监听屏幕旋转

/监听屏幕旋转/ window.addEventListener("orientationchange", function() { //屏幕

男娘i/ 2022年09月26日 15:52/ 0 赞/ 134 阅读

相关旋转屏幕导致Activity重建问题的解决办法

1 方法与 3 方法需要同时用吗？项目中有些地方同时用了，空了探究一下。 ============================================= A

秒速五厘米/ 2022年08月23日 08:55/ 0 赞/ 99 阅读

相关 iOS开发屏幕旋转锁定横竖屏解决方法

iOS开发屏幕旋转锁定横竖屏解决方法使用场景：公司最近产品，有两个界面是横屏的，其他的界面是竖屏的。针对这个需求，也调试了一段时间。在网上也查找了不少资料。解决的方

古城微笑少年丶/ 2022年08月19日 00:28/ 0 赞/ 426 阅读

相关移动屏幕旋转解决方法

禁止用户屏幕旋转。这点可以肯定的说是做不到的，之前因为有项目需要禁止屏幕旋转，所以网上查阅了大量的资料，发现根本没有解决办法，在移动版webkit中根本做不到。苹果api也

红太狼/ 2022年07月30日 14:55/ 0 赞/ 169 阅读

相关 iOS指定页面屏幕旋转，手动旋转（iOS 屏幕旋转只在当前控制器生效）

在AppDelegate.m中 \_allowRotation设置对应属性 @property (nonatomic, assign) NSInteger all

向右看齐/ 2022年07月24日 04:06/ 0 赞/ 154 阅读

相关 Hbuilder屏幕旋转

在做Hbuilder的移动APP项目时，遇到屏幕旋转的问题，因此查了下关于屏幕旋转的资料。在html5+ 的api中有个锁定屏幕方向的方法是 plus.screen.lo

比眉伴天荒/ 2022年05月15日 00:58/ 0 赞/ 741 阅读

相关 Ubuntu屏幕触摸旋转

使用了HDPortableDisplay的显示器，接在Ubuntu16.04 x86\_64 架构的主板上进行触摸。现在的需求是为了显示效果，应用竖排显示，系统使用xran

「爱情、让人受尽委屈。」/ 2022年02月05日 10:15/ 0 赞/ 935 阅读