为什么面向设备的javascript会扰乱我的元素定位？_Javascript_Html_Css

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

javascript html css

为什么面向设备的javascript会扰乱我的元素定位？,javascript,html,css,Javascript,Html,Css,因此，我的网站或多或少都具有响应性。当使用全屏桌面或移动设备时，所有东西都保持居中且尺寸合适。但当我尝试合并一些面向设备的javascript时，一切都变得混乱了。我敢肯定，我是一个菜鸟，显然我错过了一些东西，但任何洞察都会很感激：）为这场混乱提前道歉（我尝试了很多不同的事情，但都没有成功，我仍然对每件事都有自己的看法） CSS: HTML: JS: var colorbars=document.querySelector（'.colorbars'）； var barbox=documen

因此，我的网站或多或少都具有响应性。当使用全屏桌面或移动设备时，所有东西都保持居中且尺寸合适。但当我尝试合并一些面向设备的javascript时，一切都变得混乱了。我敢肯定，我是一个菜鸟，显然我错过了一些东西，但任何洞察都会很感激：）为这场混乱提前道歉（我尝试了很多不同的事情，但都没有成功，我仍然对每件事都有自己的看法）

CSS:

HTML:

JS:


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；
功能手柄方向（事件）{
var x=event.beta；//范围[-180180]内的度数
var y=event.gamma；//范围内的度数为[-90,90]
output.innerHTML=“beta:”+x+“\n”；
output.innerHTML+=“gamma:+y+”\n”；
如果（x>90）{x=90}；
如果（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）；

JS评论道：

JS重新添加到：

因为你计算了一个方向的maxW和MaxH…@epascarello好的，所以这与JS有关（还不完全理解JS），如果你或其他人有一个潜在的修复方法，你会很感激的！！！：）将其移动到函数中。将所有脚本添加到$（document）.ready（函数（）{your code}）中；对于jqueryor简单函数（）{your code}js@HemaNandagopal很好的回答：）但没有解决我的问题

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;
}

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

<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>