网站在最小化的浏览器上看起来很棒，但在iPad上却没用

Question

我正在使用纯html5和css3处理website。如果您在计算机浏览器上查看它，它看起来很好，即使您将其调整为几乎与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;
    }
}

有什么建议吗？