Html 该网站在最小化浏览器上看起来很棒，但在iPad上却毫无用处

我正在使用纯html5和css3开发一个应用程序。如果你在电脑浏览器上查看它，它看起来不错，即使你调整它的大小，使它几乎和iPhone或平板电脑一样小。然而，在实际的iPad上，起始屏幕看起来毫无用处。这是我的css的标志和向下滚动按钮，这主要是给我带来麻烦：

#main-name {
  position: relative;
  background-color: #111;
  margin: auto;
  top: -65vh;
  width: 12%;
  min-width: 135px;
  height: 170px;
  border-radius: 15px;
  border: solid rgb(50, 50, 50) 5px;
  text-align: center;
  color: white;
  font-family: "Orbitron", "sans-serif";
  z-index: 1;
}
#scroll-down {
  position: relative;
  width: 83px;
  height: 83px;
  border-radius: 50%;
  margin: auto;
  top: -52vh;
  margin-bottom: -260px;
  background-image: url("imgs/down-arrow.png");
  background-repeat: no-repeat;
  background-position: 4px 10px;
  opacity: 0.65;
  font-family: "Orbitron", "sans-serif";
  z-index: 1;
}
#scroll-down:hover {
  opacity: 1;
  animation-name: opacity;
  animation-duration: 1.2s;
}
@media only screen and (max-height: 500px) {
    /* For mobile phones: */
    #main-name {
      top: -75vh;
    }
    #scroll-down {
      top: -70vh;
    }
}

---

有什么建议吗？

您能详细描述一下这个问题吗？我曾经在Chrome上玩过一点设备模拟器，并且在虚拟旋转设备时发现了一些问题。这些是你正在谈论的问题吗？我现在没有模拟器，但我有一台iPad。如果未处于横向模式，则徽标和按钮显示得太高，且未与背景居中。希望你能帮我。看起来画布、徽标和通过JavaScript向下滚动按钮上的一些位置和大小值正在更改。这些似乎与徽标和向下滚动按钮的相对位置有关。如果是我，我绝对会使用css中的计算来定位最后2个元素。我也会给画布一个100vh/100vw的高度和宽度，而不是改变窗口大小的大小，这似乎是现在正在发生的事情。我现在不在我的电脑前，但稍后我会用小提琴发布答案。我希望这对现在有帮助。我没有使用绝对定位的原因是因为那样我就不能使用margin:auto来帮助他们保持它的中心位置。我对左右值进行了一段时间的修改，但当我调整浏览器的大小时，它并没有保持居中。对绝对元素居中有什么建议吗？至于javascript，我使用p5的resize函数来确保调整窗口大小时画布的大小是正确的。我试着使用css来处理它，但是p5的一些特性使画布保持了相同的大小。