码迷,mamicode.com
首页 > 其他好文 > 详细

orientation属性判断横竖屏

时间:2019-05-05 17:56:40      阅读:144      评论:0      收藏:0      [点我收藏+]

标签:区域   class   横竖屏   das   www   现在   code   .com   src   

 

  现在有一个需求:移动端网页默认竖屏显示,当用户横屏浏览,就给予相应提示,比如横屏时显示下面截图提示信息

  技术图片

 

  几年前,可能大家想到用 window.orientation 属性来实现,现官方已弃用,不做推荐,并且有了更好的实现方式—— orientation

  orientation: portrait(竖屏,即设备中的页面可见区域高度>=宽度)

  orientation: landscape(横屏,即设备中的页面可见区域高度<=宽度

 

 

  下面是一个很简单的 demo,有兴趣的小伙伴可以感受一下

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <title>识别横竖屏</title>
        <style>
            @media (orientation: landscape) {
                body {
                    background-color: #ccc;
                }
            }
            
            @media (orientation: portrait) {
                body {
                    background-color: #000;
                }
            }
        </style>
    </head>

    <body>
    </body>

</html>

 

orientation属性判断横竖屏

标签:区域   class   横竖屏   das   www   现在   code   .com   src   

原文地址:https://www.cnblogs.com/tu-0718/p/10815162.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!