移动端竖屏/横屏判断

最新推荐文章于 2021-11-22 20:11:21 发布

weixin_30932215

最新推荐文章于 2021-11-22 20:11:21 发布

阅读量157

点赞数

文章标签：后端

原文链接：http://www.cnblogs.com/bldf/p/7519086.html

版权

根据 window.orientation 判断移动设备处于横屏（landscape）/竖屏（portrait）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="renderer" content="webkit">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no">
    <!-- uc强制竖屏 -->
    <meta name="screen-orientation" content="portrait">
    <!-- QQ强制竖屏 -->
    <meta name="x5-orientation" content="portrait">
    <title>Document</title>
</head>

<body>
    <p>测试横竖屏</p>
    <script>
        if(window.orientation !== undefined) {
            function checkOrient () {
                if (window.orientation == 0 || window.orientation == 180) {
                    var screenOrientation = 'portrait';
                } else if (window.orientation == 90 || window.orientation == -90) {
                    var screenOrientation = 'landscape';
                }
                return screenOrientation;
            }
            function landscapeAction () {
                if(checkOrient() === 'landscape') {
                    alert('为了更好的体验，请选择竖屏浏览！');
                }
            }
            // 添加事件监听
            addEventListener('DOMContentLoaded', function () {
                landscapeAction();
                window.onorientationchange = landscapeAction;
            });
        }
        
    </script>
</body>

</html>