您的位置: 首页 > IT文章 > 移动设备横竖屏判断 CSS 、JS

移动设备横竖屏判断 CSS 、JS

分类: IT文章 • 2022-07-22 23:33:22

横竖屏切换页面布局变化严重，使用媒体查询写两套css,- -

CSS

@media screen and (orientation: portrait) {
/* 竖屏 */
				
}
			
@media screen and (orientation: landscape) {
/* 横屏 */
				
}

JS

var d = window.matchMedia("(orientation: portrait)");
onMatchMeidaChange(d);
d.addListener(onMatchMeidaChange);
function onMatchMeidaChange(d) {
 if(d.matches) { // 竖屏
					
 } else { //横屏
				
 }
}