window.orientation兼容各种浏览器写法

已于 2023-05-08 16:01:50 修改
阅读量1.2k 收藏 2
点赞数 1
文章标签： javascript html 前端
于 2023-04-26 12:56:52 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44283589/article/details/130383672
版权 
window.orientation属性已经被废弃，不再建议使用。如果需要检测设备的方向，请使用window.matchMedia("(orientation: portrait)")或window.matchMedia("(orientation: landscape)")。

如果你仍然需要兼容旧的浏览器，可以使用以下代码：

复制
var orientation = window.orientation || window.screen.orientation && window.screen.orientation.type || window.mozOrientation || window.msOrientation;
这个代码会优先使用window.orientation，如果不存在则检查window.screen.orientation.type，然后再检查window.mozOrientation和window.msOrientation。```
Wxinin
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
移动端横竖屏监听小记（window.orientation、orientation）
start_sea的博客
03-27 1401
简单逼逼两句：不干别的，就是监听，其实是老属性了，监听window.orientation的数值做判断，其实就是旋转角度。判定之后做相应处理就行啦。移动端业务开发中经常会碰到横竖屏的需求，要么需要做适配，要么也得给个提示，增强用户体验。如果只是搞css样式，用第二种比较好，如果还要做相应的逻辑处理，那就搞第一种。媒体监听orientation属性，再对css样式做处理。
HTML5 API --- Screen Orientation API简介
HTML5, Chromium和WebKit技术
02-16 8945
[本文属原创，如有转载，请注明出处http://blog.csdn.net/yl02520/article/] 在移动平台的游戏中，我们经常需要通过倾斜或旋转移动设备来控制游戏中的元素，例如赛车游戏中我们需要左右倾斜来控制赛车的左右转向，神庙逃亡游戏中我们同样需要左右倾斜移动设备来控制人物行走位置的方向。设想一下，如果设备的倾斜让游戏画面产生旋转，游戏画面需要重绘来适应屏幕尺寸的改变，那对游
iPad、iPhone、Android 横屏、竖屏（window.orientation实现）的知识点
Yang'blog
05-20 7353
function orient() { if (window.orientation == 90 || window.orientation == -90) { //ipad、iphone竖屏；Andriod横屏 } else if (window.orientation == 0 || window.orientation == 180) { //ip
移动端判断横竖屏状态及监听变化
最新发布
qq_39460057的博客
05-28 285
2、监听横竖屏切换事件。
JavaScript 侦测手机浏览器的五种方法_navigator(1)，2024年最新大数据开发工作经验6年
2303_79055785的博客
04-17 851
第四种方法是，手机浏览器的 DOM 元素可以通过​​ontouchstart​​属性，为​​touch​​事件指定监听函数。桌面设备没有这个属性。​​window.orientation​​属性用于获取屏幕的当前方向，只有移动设备才有这个属性，桌面设备会返回​​undefined​​。​​window.screen​​对象返回用户设备的屏幕信息，该对象的​​width​​属性是屏幕宽度（单位为像素）。上面示例中，如果屏幕宽度​​window.screen.width​​小于500像素，就认为是手机。
检测设备屏幕的方向
weixin_44283589的博客
09-22 110
clearRect() 传入的宽高是以像素为单位的。
移动端 -- 屏幕旋转的事件和样式
小草莓的博客
03-19 1218
0和180 表现为竖屏模式；正负90 表示横屏模式；
JavaScript Window Screen
笔记
02-22 1202
JavaScript Window Screen 对象是 JavaScript 语言中的一个重要对象。它可以帮助我们获取到设备的屏幕分辨率、显示模式等信息，同时还可以帮助我们实现窗口跳转、调整窗口大小等功能。在实际开发中，我们可以根据 JavaScript Window Screen 对象提供的信息，来优化网站或应用的 UI 布局，提升用户体验。同时，我们还可以使用 JavaScript Window Screen 对象的一些方法，来实现一些复杂的功能。
32 【Navigator 对象和Screen 对象】
DSelegent的博客
08-26 249
32 【Navigator 对象和Screen 对象】
JS基础--navigator 和 screen
weixin_54500649的博客
03-22 350
Navigator对象 Navigator 对象包含有关浏览器的信息，通常用于检测浏览器与操作系统的版本。 对象属性: 查看浏览器的名称和版本，代码如下: <script type="text/javascript"> var browser=navigator.appName; var b_version=navigator.appVersion; document.write("Browser name"+browser); document.write("<
使用JavaScript判断手机浏览器是横屏还是竖屏问题
01-19
//判断手机横竖屏状态： function hengshuping(){ if(window.orientation==180||window.orientation==0){ alert(竖屏状态！) } if(window.orientation==90||window.orientation==-90){ alert(横屏状态！) } } window.addEventListener(onorientationchange in window ? orientationchange : resize, hengshuping, false); //移动端的浏览器一般
移动端横竖屏检测
越努力，越幸运！
03-03 661
一、HTML方法检测 在html中分别引用横屏和竖屏样式 <!-- 引用竖屏的CSS文件 portrait.css --> <link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css" rel="external nofollow"> <!-- 引用横屏的CSS文件 landscape.css --> <link rel="styleshee
微信内置浏览器IOS与Android的区别和大坑(一)
滴水穿石
06-26 1万+
1、IOS点返回时返回假页面，如果前一页有个弹窗之类的，那返回时会带着这个弹窗，并且点击弹窗上的按钮根本不好使（安卓无此问题）。解决方式：返回时重新刷新前一页代码： window.onpageshow=function(e){     if(e.persisted) {         window.location.reload()      } };2、H5原生的&lt;input  type...
Android Orientation Sensor（方向传感器）详解与应用
热门推荐
小灯光环
12-08 1万+
关于通过Android方向传感器实现指南针效果
js 监听屏幕转动orientationchange 获取横屏状态window.orientation 监听屏幕旋转完成 苹果手机屏幕多次旋转之后window获取的尺寸不对
weixin_42448623的博客
07-02 4891
// 监听屏幕转动 window.addEventListener('orientationchange',function(){ var orientation = window.orientation; switch(orientation){ case 90: case -90: orientation = 'landscape'; //这里是横屏 break; default:
窗口兼容性问题的一些小总结
前端小菜鸟<(￣ˇ￣)/
10-28 534
大家都知道用来确定和修改window对象位置和属性的方法有很多，但这些方法又有很多的区别，让人烦恼不已。 1.用来表示窗口相对于屏幕左边和上边的位置： sreenLeft和screenTop：IE、Safari、Opera和Chrome提供sreenLeft和screenTop screenX和screenY：Firefox、Safari、Chrome都提供了。 值得注意的是：在Opera
移动端事件
AP0906424的博客
05-30 696
一、移动端基本事件1.基础事件 touchstart手指按下时触发 touchmove手指移动时触发 touchend手指抬起时触发 2.使用方法 我们在使用上面三个事件时，要用js 的事件绑定方式去使用（addEventListener()）, JQ 的on()等绑定事件不起作用， 例如： var box = document.querySelector("#box"); box.addEventListener("touchstart",start); ...
判断游标是否被打开的属性是___________orientation属性（判断是否为横竖屏）
weixin_42202078的博客
01-16 112
现在有一个需求：移动端网页默认竖屏显示，当用户横屏浏览，就给予相应提示，比如横屏时显示下面截图提示信息几年前，可能大家想到用 window.orientation 属性来实现，现官方已弃用，不做推荐，并且有了更好的实现方式—— orientationorientation: portrait（竖屏，即设备中的页面可见区域高度>=宽度）orientation: landscape（横屏，即设备...
chrome浏览器启动时候的默认网页设置不生效怎么解决
xiamocsdn的博客
04-01 7882
chrome浏览器启动时候的默认网页设置不生效怎么解决 鼠标放在Google chrome图标上，右键点击属性 2.
window.WebSocket兼容浏览器
03-28
WebSocket是HTML5的一种新协议，用于实现浏览器与服务器之间的实时通信。由于每个浏览器的实现不同，因此不是所有浏览器都支持WebSocket协议。以下是WebSocket兼容的浏览器列表： - Chrome 4+ - Firefox 4+ - Internet Explorer 10+ - Safari 5+ - Opera 10.70+ 请注意，这只是目前主流浏览器的列表。如果您需要支持更早版本的浏览器，可能需要使用其他实时通信技术，如轮询或长轮询。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值