JS 获取和监听手机屏幕方向变化

最新推荐文章于 2021-05-25 17:45:58 发布

转载最新推荐文章于 2021-05-25 17:45:58 发布 · 1.6k 阅读

JavaScript 案例专栏收录该内容

15 篇文章

订阅专栏

本文介绍了一段使用JavaScript的matchMedia API来检测并响应设备屏幕方向（竖屏或横屏）变化的代码。通过监听窗口媒体查询，该代码能够在设备方向改变时触发相应的事件处理函数，从而实现对不同屏幕方向的适配。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

代码：

var mql = window.matchMedia('(orientation: portrait)');
		console.log(mql);

		function handleOrientationChange(mql) {
				if (mql.matches) {
					console.log('竖屏'); // 竖屏
					alert('竖屏');
				} else {
					console.log('横屏'); // 横屏
					alert('横屏');
				}
			}
			// 输出当前屏幕模式
		handleOrientationChange(mql);
		// 监听屏幕模式变化
		mql.addListener(handleOrientationChange);