Question

所以我的网站响应速度或多或少。全屏桌面或移动时，一切都保持中心和大小不错。但是，当我尝试合并一些设备方向javascript时，一切都变得混乱。我确信这是显而易见的，因为我是一个新手，但是我很想知道任何见解都会受到赞赏:)对于这个烂摊子提前抱歉（一直在尝试许多不同的事情但没有成功，但我仍然对所有事情都有所了解。）< / p>

CSS：

body {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
  width: 100%;
  height: 100%;
  min-width: 375px;
  min-height: 375px;
}

.barbox {
  position: relative;
  flex: 1;

}
.colorbars {
  margin:auto;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 60vw;
  height: 60vw;
  max-width: 700px;
  max-height: 700px;
  transform: translate(-50%, -50%);
  border: 4px solid black;
  }

.coverart {
  flex: 1;
  position: absolute;
  width: 80%;
  top: 10%;
  left: 10%;
  display: block;
  border: 2px solid black;
  box-shadow: 11px 9px 41px 0px rgba(0,0,0,0.75);
  margin: auto;
}
 .bgimg {
   background-size:cover;
   background-repeat: repeat;
   width: 100vw;
   height: 100vh;
   overflow: hidden;
}

HTML：

<body class="bgimg">
  <div class="barbox">
    <div class="colorbars">
      <a href=""> <img class="coverart" src="css/images/RET001.jpg"/>
      </a>
    </div>
 </div>
</body>

JS：

<script type="text/javascript">
var colorbars   = document.querySelector('.colorbars');
var barbox = document.querySelector('.barbox');
var output = document.querySelector('.output');

var maxX = barbox.clientWidth  - colorbars.clientWidth;
var maxY = barbox.clientHeight - colorbars.clientHeight;

function handleOrientation(event) {
  var x = event.beta;  // In degree in the range [-180,180]
  var y = event.gamma; // In degree in the range [-90,90]

  output.innerHTML  = "beta : " + x + "\n";
  output.innerHTML += "gamma: " + y + "\n";

  if (x >  90) { x =  90};
  if (x < -90) { x = -90};

  x += 90;
  y += 90;

  colorbars.style.top  = (maxX*x/180 - 10) + "px";
  colorbars.style.left = (maxY*y/180 - 10) + "px";
}

window.addEventListener('deviceorientation', handleOrientation);
</script>

JS注释掉：

JS添加回来：

为什么设备方向javascript会弄乱我的元素定位？

0 个答案: