js监听手机横竖屏事件

最新推荐文章于 2022-07-03 18:28:55 发布

兜兜奶爸

最新推荐文章于 2022-07-03 18:28:55 发布

阅读量728

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/qq_30419875/article/details/110479199

版权

js 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

window.addEventListener("orientationchange", function() {
	if (Math.abs(window.orientation) === 90) {
        // Landscape
        alert('横屏');
    } else {
        // Portrait
        alert('竖屏');
    }
}, false);

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

兜兜奶爸

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

JS获取设备横竖屏幕方向并监听变化

到得还来别无事，庐山烟雨浙江潮。

12-16

3345

先上完整代码： var mql = window.matchMedia('(orientation: portrait)'); console.log(mql); function onMatchMediaChange(mql){ if(mql.matches){ //竖屏 console.log('此时竖屏') }else{ /...

手机横竖屏切换事件

02-26

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="application/xhtml+xml;charset=UTF-8" /> <meta name="viewport" content="width=device-width" /> <title>手机横、竖屏事件</title> [removed] //屏幕方向标识，0横屏，其他值竖屏 var orientation=0; //转屏事件，内部功能可以自定义 function screenOrientationEvent(){ if(orientation == 0)document.getElementById("change").value="竖"; else document.getElementById("change").value="横"; } var innerWidthTmp = window.innerWidth; //横竖屏事件监听方法 function screenOrientationListener(){ try{ var iw = window.innerWidth; //屏幕方向改变处理 if(iw != innerWidthTmp){ if(iw>window.innerHeight)orientation = 90; else orientation = 0; //调用转屏事件 screenOrientationEvent(); innerWidthTmp = iw; } } catch(e){alert(e);}; //间隔固定事件检查是否转屏，默认500毫秒 setTimeout("screenOrientationListener()",500); } //启动横竖屏事件监听 screenOrientationListener(); [removed] </head> <body <input id="change" type="text" value=""/> </body> </html>

参与评论您还未登录，请先登录后发表或查看评论

js监听移动端横屏和竖屏状态

Lc_style的博客

11-02

1803

1.通过添加监听事件onorientationchange，然后判断window.orientation这个参数： window.addEventListener("onorientationchange" in window ? "orientationchange" : "resize", function() { console.log(window.orientation) if (window.orientation === 180 || window.

js 检测手机横竖屏

luyundesign的博客

04-14

183

// 检测横竖屏 var orient = '' function checkOrient() { if (window.orientation == 0 ){ orient = 'portrait 0 right'; } else if (window.orientation == 180){ orient = 'portrait 180 left'; } else if (window.orientation == 90 || window.ori

使用JS判断移动端手机横竖屏状态

10-18

本文通过js和cas代码分别给大家介绍了移动端判断手机横竖屏状态的相关知识，非常不错，具有一定的参考借鉴价值，需要的朋友参考下吧

JavaScript 监听移动端横竖屏状态的几种方式

明天也要努力的博客

07-03

3945

关于 orientationchange 事件定义和用法：在用户水平或者垂直翻转设备（即方向发生变化）时触发的事件。当视图状态发生改变时，监听器对应的函数就会执行，而对应的 MediaQueryList 对象也会传入。这个对象包括两个属性：matches（布尔值），表示CSS media query是否与当前的显示状态匹配；media 对应传入的参数字符串。关于 matchMedia() 方法定义和用法： matchMedia() 返回一个新的 MediaQueryList 对象，表示指定的媒体查询

JavaScript应用实例-横竖屏监听.js

12-09

JavaScript应用实例-横竖屏监听.js

更靠谱的H5横竖屏检测方法（js代码）

10-21

这种方法在大多数现代浏览器中都能工作，但存在一个问题：只要窗口大小有任何变化（不仅仅是横竖屏切换），`resize`事件都会被触发，可能导致不必要的性能消耗。 ```javascript var orientationHandler = function...

JS和css实现检测移动设备方向的变化并判断横竖屏幕

10-24

本文将深入探讨如何使用JavaScript（JS）和CSS来检测移动设备的方向变化，并判断用户是处于横屏还是竖屏模式。首先，我们来看一下使用JavaScript来监听设备方向变化的方法。JavaScript提供了`orientationchange`...

移动端监听横竖屏，移动端横竖屏

imkaifan的博客

05-18

457

移动端监听横竖屏 // 监听横竖屏 let event = "onorientationchange" in window ? "orientationchange" : "resize"; window.addEventListener(event,this.resizeChange,false); 其实横竖屏有两种形式：一种是手动的触发的横竖屏，就是点击全屏，点击退出全屏。一种是自动的，就是监听手机的横竖屏，自动的做一些处理。 ...

js实现手机横竖屏事件

热门推荐

大灰狼的小绵羊哥哥的博客

10-22

1万+

在做H5项目时，需要在横竖屏变化时，做一些处理。毫无疑问，需要使用orientationchange来监听横竖屏的变化。 https://github.com/zuopf769/notebook/tree/master/fe/js%E5%AE%9E%E7%8E%B0%E6%89%8B%E6%9C%BA%E6%A8%AA%E7%AB%96%E5%B1%8F%E4%BA%8B%E4%BB%B6

js 手机横竖屏事件实现

weixin_30653097的博客

07-28

297

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="application/xhtml+xml;charset=UTF-8" /> <meta name="viewport" content="width...

js orientationchange事件在获取页面宽高时出错

07-21

5947

orientationchange事件在触发时获得页面宽高不正确的解决方案

移动端h5页面监听手机横屏

onemango的博客

03-23

2637

var orientation; //页面加载时调用 orient(); //用户变化屏幕方向时调用 $(window).bind( 'orientationchange', function(e){ orient(); }); function orient() { if (window.orientation == 90 || window.orientation == -9...

【原】js检测移动端横竖屏

weixin_33923148的博客

05-30

377

摘要：上周做了一个小项目，但是要放到我们的app上，然而需要横竖屏使用不同的样式。横屏一套，竖屏一套。调用了手机APP那里的api,可是他们那里ios和安卓返回的不一样。各种头疼。于是用了css3的media来做。根据不同的屏幕尺寸显示不同的样式，可是还是有问题的。使用media来判断屏幕宽度遇到的问题： ios上当我旋转屏幕的时候可行，但是安卓机上没反应，横屏显示的还是我竖屏的样...

HTML5中判断横屏竖屏和长按事件

u014033756的专栏

06-14

1089

HTML5中判断横屏竖屏http://www.w3cways.com/1772.html 长按事件http://my.oschina.net/luoyezhiqiu/blog/493301

js实现监听手机端横屏竖屏切换

楠姐的博客

12-30

1244

代码实现方式 let event = "onorientationchange" in window ? "orientationchange" : "resize" window.addEventListener(event,resizeChange,false) function resizeChange (){ if(window.orientation==0 ||window.orientation==0){ console.log("我是横屏~~~~~~") }.

@media、orientationchange事件、监测微信移动端横竖屏

L凯的博客

06-07

2821

前段时间接手一个别人的移动端项目，因为没有做横屏样式也没有提示用户关掉手机横屏，每当用户手机开启横屏模式时，会造成页面样式的混乱。方法一：利用CSS3 @media 媒体检测横竖屏orientation:portrait 竖屏orientation:landscape 横屏.errSreen指横屏时展示的提示页面.FullScreenPPTWrap指正常显示的内容基本原理：通过页面可视区宽高比例判...

JavaScript实现移动设备横竖屏切换与样式适应

在JavaScript手机转屏实现的过程中，一个重要应用场景是移动端开发中的用户体验优化，开发者需要根据设备的横竖屏状态来调整页面布局、样式或内容展示。移动设备通常通过window对象的orientation属性来检测当前屏幕...