JavaScrpit判断横竖屏

最新推荐文章于 2025-09-12 16:56:45 发布

weixin_33953384

最新推荐文章于 2025-09-12 16:56:45 发布

阅读量91

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/jackson0714/p/7603635.html

本文介绍了一种使用JavaScript检测设备屏幕方向的方法，并通过修改元素的类名来响应不同的方向状态（横屏或竖屏）。此外，还探讨了window.orientation属性在不同设备上的兼容性问题。

JavaScript

function setLandscapeClass(){
  if(window.orientation === 90 || window.orientation === -90 ){
    var landscapeBox = document.getElementById("landscapeBox")
    landscapeBox.className = "landscape"
  }
  if(window.orientation === 180 || window.orientation === 0){
    var landscapeBox = document.getElementById("landscapeBox")
    landscapeBox.className = "portrait"
  }
}

setLandscapeClass()

window.addEventListener("onorientationchange" in window ? "orientationchange" : "resize", setLandscapeClass, false);

CSS

.landscape{
  z-index: 1001;
  width: 100%;
  height: 100%;
  top: 0rem;
  left: 0rem;
  background: url('../images/landscape_tip.gif') no-repeat;
  background-size: cover;
  position: fixed;
}

.portrait{
  display: none;
}

HTML