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

最新推荐文章于 2025-03-22 12:36:55 发布

L凯

最新推荐文章于 2025-03-22 12:36:55 发布

阅读量2.8k

点赞数

分类专栏： css JS 文章标签： CSS3 javascript orientationchange

本文链接：https://blog.csdn.net/weixin_37697277/article/details/80607467

版权

本文介绍了两种检测移动端横竖屏的方法：使用CSS3的@media查询和JavaScript的orientationchange事件。在处理横竖屏切换时，注意到@media可能因输入法界面导致误判，而orientationchange事件能更准确地监听屏幕方向变化。

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

前段时间接手一个别人的移动端项目，因为没有做横屏样式也没有提示用户关掉手机横屏，每当用户手机开启横屏模式时，会造成页面样式的混乱。

方法一：利用CSS3 @media 媒体检测横竖屏

orientation:portrait 竖屏

orientation:landscape 横屏

.errSreen指横屏时展示的提示页面

.FullScreenPPTWrap指正常显示的内容

基本原理：通过页面可视区宽高比例判断是否发生了横屏，可视区高度大于宽度为竖屏，可视区宽度大于高度为横屏。

注意点：在某些情况下这个方法并不可靠。比如。当我的移动端页面中有需要输入用户信息的input标签时，每次输入信息时手机输入法界面就会占据手机可视区。那么就有一种可能是输入法界面占据太多高度，导致可视区的宽度大于高度。CSS @media就认为此时发生了横屏事件，使页面样式发生变化，本来应该显示的页面却没有显示出来。

不过如果页面只是展示的话，这个方法还是可行的。

@media screen and (orientation:portrait) {
	.errSreen {
		display: none;
	}
	.FullScreenPPTWrap {
		display: block;
	}
}

@media screen and (orientation:landscape) {
	.errScreen {
		display: block;
	}
	.FullScreenPPTWrap {
		display: none;
	}
}

方法二：通过window监听orientationchange事件，判断window.orientation属性检测横竖屏