orientation属性(判断是否为横竖屏)
2024-09-06 22:10:43
现在有一个需求:移动端网页默认竖屏显示,当用户横屏浏览,就给予相应提示,比如横屏时显示下面截图提示信息
几年前,可能大家想到用 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>
最新文章
- mysql授权
- PowerDesigner中Table视图怎样同时显示Code和Name
- mysql简单操作(实时更新)
- tab左右箭头切换(修改后)
- MAT
- Windows环境变量设置无效解决办法——DOS窗口设置环境变量
- python __enter__ 与 __exit__的作用,以及与 with 语句的关系
- 利用CSS3的transform 3D制作的立方体旋转效果
- sgu 286. Ancient decoration(最小环覆盖)
- js 向form表单中插入数据
- Java_基础篇(数组的反转)
- spring boot+spring data jpa+gradle+mysql配置问题
- bzoj4361 isn(树状数组优化dp+容斥)
- PHP实现的自定义图像居中裁剪函数示例
- ajax操作json的三种方式
- 【Scala】Scala-Option-Null的蹊跷
- php 内存分配
- display_css
- ubuntu 下更新pip后发生 ImportError: cannot import name &#39;main&#39;的问题解决
- Gogs安装配置(快速搭建版)转载
热门文章
- Retrofit的优点
- asp.net实现页面跳转后不可以返回
- Python-函数参数类型及排序问题
- NopCommerce源代码分析之用户验证和权限管理
- Bootstrap-table表格插件的使用方法
- 如何使用Postman发送get请求?
- web下载附件及修改名称
- Jetty启动报Error scanning entry META-INF/versions/9/org/apache/logging/log4j/util/ProcessIdUtil.class
- JDBC学习笔记二
- SQL Server 两条数据创建时自动关联