CSS3判断手机横屏竖屏
2024-09-15 18:38:43
原理：
当用户旋转屏幕的时候，会进入到你的监听方法中，然后通过window.orientation来获取当前屏幕的状态：
0 - 竖屏
90 - 逆时针旋转横屏
-90 - 顺时针旋转横屏
180 - 竖屏，上下颠倒
如果你不希望用户使用横屏方式查看你的网页，你可以在设备旋转时间监听里面对body使用CSS3里面的transition中的旋转来保持页面竖向。
移动设备上的页面，当屏幕旋转的时候会有一个orientationchange事件。你可以给body元素增加此事件的监听：
<body onorientationchange="updateOrientation();">
监控窗体变化来实现监控手机屏幕横竖
@media screen and (orientation:portrait) {
css[竖向定义样式]
}
@media screen and (orientation:landscape) {
css[横向定义样式]
}
最新文章
- 自定义ViewGroup初步探究
- Html_color code表示
- jQuery两个列表中元素相互交换Demo
- 阻止事件冒泡（stopPropagation和cancelBubble）和阻止默认行为(preventDefault和returnValue)
- yii_CGridView_ajax_pagination_and_ajax_sort
- Ansible Filter
- php curl详细解析和常见大坑
- bzoj4827 [Hnoi2017]礼物
- 如何用快速傅里叶变换实现DFT
- php配置文件参数设置
- hdu 5536 Chip Factory (01 Trie)
- ISCC：Please give me username and password!
- P2P贷款全攻略,贷前、贷中、贷后工作事项解析
- Spring @RequestParam、@RequestBody和@ModelAttribute区别
- 『TensorFlow』网络操作API_下
- 【模板】Tarjan scc缩点
- BZOJ 1083 [SCOI2005]繁忙的都市 （最小生成树裸题无重边） 超简单写法！！
- CentOS 7.4 初次手记：第三章 CentOS基础了解
- python语法（五）—函数
- JavaScript 代码小片段