前端开发移动端强制横屏

web前端开发课程下载
前端开发源码下载
前端开发工作周报模板下载

知识点:
横竖屏时的旋转角度:window.orientation
横竖屏改变时触发之:window.orientationchange(resize可代之,但输入法键盘显示时亦触发)

问题:
有些浏览器orientationchange时获取的窗口宽高为旋转前的宽高。

解决:
orientationchange触发后延时获取

预览地址

html 代码

<!DOCTYPE html>
<html lang=”en”>
    <head>
        <meta
            name=”viewport”
            content=”width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no minimal-ui”
        />
        <meta charset=”UTF-8″ />
        <title></title>
        <style>
            html,
            body {
                margin: 0;
                width: 100%;
                height: 100%;
                overflow: hidden;
            }
            #wrap div {
                display: flex;
                justify-content: center;
                align-items: center;
                background: #000;
                font-size: 45px;
                color: #fff;
            }
        </style>
    </head>
    <body>
        <div id=”wrap”><div></div></div>
        <script>
            var p = document.querySelector(‘#wrap div’)
            function ori() {
                var ww = window.innerWidth
                var wh = window.innerHeight
                var o = window.orientation
                if (o == 0) {
                    p.style.width = wh + ‘px’
                    p.style.height = ww + ‘px’
                    p.style.marginTop = (wh – ww) / 2 + ‘px’
                    p.style.marginLeft = (ww – wh) / 2 + ‘px’
                    p.style.transform = ‘rotate(90deg)’
                } else {
                    p.style.width = ww + ‘px’
                    p.style.height = wh + ‘px’
                    p.style.marginTop = 0 + ‘px’
                    p.style.marginLeft = 0 + ‘px’
                    p.style.transform = ‘rotate(0)’
                }
                p.innerHTML = ww + ‘:’ + wh + ‘:’ + o
            }
            ori()
            window.addEventListener(
                ‘onorientationchange’ in window
                    ? ‘orientationchange’
                    : ‘resize’,
                function() {
                    setTimeout(ori, 150)
                },
            )
        </script>
    </body>
</html>
前端开发代码下载
html 前端开发模板下载
wbe前端开发编译器下载
» 本文来自:前端开发者 » 《前端开发移动端强制横屏》
» 本文链接地址:https://www.rokub.com/7983.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!