H5 - 强制横屏

1、常用的小游戏开发挺多都是横屏显示，所以我们H5开发同样也需要横屏显示，所以我分享一个强制横屏的demo,html的内容如下：

<body style="margin: 0px;height: 100%;padding: 0;" >
        <div id="print">
            <div id="changeIt">
               11111111
            </div>
        </div>
    </body>

2、通过媒体查询，区分在横屏和竖屏的状态下使用的css,代码如下：

            /* 竖屏   orientation: portrait 代表竖屏的状态下*/
            @media screen and (orientation: portrait) {
                html {
                    width: 100%;
                    height: 100%;
                    overflow: hidden;
                }
                body {
                    width: 100%;
                    height: 100%;
                    overflow: hidden;
                }

                #print {
                    position: absolute;

                }
            }

            /* 横屏 orientation: landscape代表手机在横屏的状态下 */
            @media screen and (orientation: landscape) {
                html {
                    width: 100%;
                    height: 100%;
                }
                body {
                    width: 100%;
                    height: 100%;
                }
                #print {
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 100%;
                    height: 100%;
                }
            }

3、接下来是js代码，大家可以手动拷贝一份：

<script>
    // 试试横屏
    let width = document.documentElement.clientWidth;
    let height = document.documentElement.clientHeight;
    if (width < height) {
        console.log(width + "，" + height);
        $print = $('#print');
        $print.width(height);
        $print.height(width);
        $print.css('top', (height - width) / 2);
        $print.css('left', 0 - (height - width) / 2);
        $print.css('transform', 'rotate(90deg)');
        $print.css('transform-origin', '50% 50%');
    }
    var evt = "onorientationchange" in window ? "orientationchange" : "resize";
    console.log(evt, 'evt')
    window.addEventListener(evt, function() {
        setTimeout(function() {
            var width = document.documentElement.clientWidth;
            var height = document.documentElement.clientHeight;

            $print = $('#print');
            $videoIntroduce = $('#videoIntroduce')
            $toVideoBack = $('#toVideoBack')
            $backgroundImg = $('.backgroundImg')
            if (width > height) {
                $print.width(width);
                $print.height(height);
                $print.css('top', '0');
                $print.css('left', 0);
                $print.css('transform', 'none');
                $print.css('transform-origin', '50% 50%');
            } else {
                $print.width(height);
                $print.height(width);
                $print.css('top', (height - width) / 2);
                $print.css('left', 0 - (height - width) / 2);
                $print.css('transform', 'rotate(90deg)');
                $print.css('transform-origin', '50% 50%');
            }
        }, 500)
    }, false);
    
</script>

4、我们先用浏览器手机模式测试一下，效果图如下（横屏跟竖屏都是横屏的模式）：　　　　　　　　　--真机测试同样也达到了强制横屏的效果

 

posted @ 2021-06-17 11:08  凌晨的粥  阅读(3722)  评论(0)    收藏  举报