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>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。