现在有一个需求：移动端网页默认竖屏显示，当用户横屏浏览，就给予相应提示，比如横屏时显示下面截图提示信息
几年前，可能大家想到用 window.orientation 属性来实现，现官方已弃用，不做推荐，并且有了更好的实现方式—— orientation
orientation: portrait（竖屏，即设备中的页面可见区域高度>=宽度）
orientation: landscape（横屏，即设备中的页面可见区域高度<=宽度）
下面是一个很简单的 demo，有兴趣的小伙伴可以感受一下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>识别横竖屏</title>
<style>
@media (orientation: landscape) {
body {
background-color: #ccc;
}
}
@media (orientation: portrait) {
body {
background-color: #000;
}
}
</style>
</head>
<body>
</body>
</html>
原文地址：https://www.cnblogs.com/tu-0718/p/10815162.html
时间： 2024-10-09 21:45:52