Question

有一个奇怪的问题，固定不正常。你可以在这里看到它：https://randohinn.com/uus/当你在你的计算机上滚动时，标题就好了，但是在移动设备上，一旦你滚动，它会移动大约15个像素，所以上半部分直到我的名字字母开始为止没有出现。为什么会这样，我该如何解决？

Answer 1

可能不是很明显，但额外的高度是由额外的宽度引起的。您的<body>宽于100vw并导致双滚动效果，导致固定标题在您滚动正文时四处移动。

您在main.css：

中放置了以下CSS规则

.row {
   ...
  margin-right: -.5rem;
  margin-left: -.5rem; 
}

您可能希望将它们包含在@media(min-width: 768px) {}查询中，类似于Bootstrap的工作方式。

或者，您可以在移动设备上将其设置为0：

@media(max-width: 767px) {
  .row {
     margin-right: 0;
     margin-left: 0; 
   }
 }

请确保将其置于上述规则集之后。

上面在模拟器中修复了我的问题，但模拟器并不总是准确的。如果您仍然遇到双卷轴，请使用

@media(max-width: 767px) {
  body {
    width: 100vw;
    overflow-x: hidden;
  }
}