Css 针对手机震动/抖动的响应性设计。共同原因？

这是一个更一般的问题。我有一个使用Bootstrap4的站点，它在桌面上看起来很好，在移动设备上也很好。但是，在某些页面上，从导航栏到页脚的内容在向下滚动时会抖动。这就好像页面边界的两边都有太多的边距。所以它从来都不是固定的，总是根据你的手指的动作向左或向右移动。我试着调试它，逐行删除有问题的页面及其对应的css。不过，这种情况似乎一直在发生。我在想，可能与Bootstrap css中内置的自然边距存在某种冲突，但这应该发生在每个页面上。这里包含的代码太多了，所以我想知道是否有人对我可能会寻找什么来保持这些东西有什么一般性的想法。我应该注意到这个问题只发生在手机上。提前谢谢

更新：叹气。好的，这是密码。我不想这样做，因为要筛选的东西太多了。这是CSS。很抱歉时间太长了。我不知所措

    *body {
      background-color: #F4F4F4;
      background-image: url(../images/water-background.jpg);
      background-size: cover;
    }
    .gradient-line {
     margin: 25px 0;
     height: 1px;
     background: black;
      background: -webkit-gradient(linear, 0 0, 100% 0, from(white), 
    to(white), color-stop(50%, black));
    }
    .navbar {
      color: #F4F4F4;
      background-color: #a0adb7;
      height: 5em;
      text-align: center;
    }
    .navbar .active a {
      color: #F4F4F4 !important;
    }
    .navbar ul.pages {
      display: inline-block;
      color: #233237;
      height: 0.8em;
      font-family: "Abolon", "Oswald-Bold", sans-serif;
  font-size: 1.45em;
  margin-top: 1.25em;
}
.navbar ul.pages li.page {
  margin-left: 0.5em;
  margin-right: 0.5em;
  top: 0.8em;
  color: #233237;
  display: inline;
}
.navbar ul.pages li.page a {
  color: #233237;
  text-decoration: none;
}
.navbar ul.pages li.page a:hover {
  color: #c2bba8;
  background-color: transparent;
}
.navbar ul.pages #nav-brand {
  margin-top: -1.5em;
  z-index: 999999;
}
@media (max-width: 767px) {
  .navbar {
    text-align: center;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
  }
  .navbar .active a {
    color: #F4F4F4 !important;
  }
  .navbar a:hover {
    background-color: #a0adb7;
  }
  #mobile-menu {
    background-color: #859099;
    margin-top: 4.5em;
    padding-bottom: 2em;
  }
  #mobile-menu ul {
    display: inline-block;
    color: #233237;
    height: 0em;
    font-family: "Abolon", "Oswald-Bold", sans-serif;
    font-size: 2em;
    margin: 0;
  }
  #mobile-menu ul li.page {
    margin: 0;
    top: 0em;
  }
}
.navbar-toggler {
  font-size: 2.5em;
  float: right;
  outline: 0 !important;
}
.navbar-toggler .navbar-toggler:focus:active {
  outline: 0 !important;
}
.splash {
  margin-top: 2em;
}
.splash .brand-holder {
  margin-bottom: -1.5em;
}
.splash .brand-holder .welcome {
  margin-bottom: 0.75em;
  font-size: 4em;
  font-family: "Oswald-Bold", "Abolon", sans-serif;
}
@media screen and (max-width: 993px) {
  .splash .brand-holder .welcome {
    font-size: 3.5em;
  }
}
.splash .constrain-contain {
  margin-top: -2em;
}
.splash .constrain-contain .slide-container {
  display: inline;
  font-family: "Abolon";
}
.splash .constrain-contain .slide-container .slide {
  width: 350px;
  height: 450px;
  margin: 0;
  margin-right: 0;
  display: inline-block;
  vertical-align: top;
  border: 1px solid lightgrey;
  color: #c2bba8;
  text-align: justify;
  cursor: pointer;
  cursor: hand;
}
@media (min-width: 540px) and (max-width: 1200px) {
  .splash .constrain-contain .slide-container .slide {
    width: 300px;
    height: 400px;
  }
}
.splash .constrain-contain .slide-container .transform {
  overflow: hidden;
}
.splash .constrain-contain .slide-container .transform img {
  -webkit-transition: all 1s ease-in-out;
  -moz-transition: all 1s ease-in-out;
  -o-transition: all 1s ease-in-out;
  -ms-transition: all 1s ease-in-out;
  transition: all 1s ease-in-out;
}
.splash .constrain-contain .slide-container .transform:hover img {
  transform: translateX(-550px);
}
.splash .constrain-contain .slide-container .background,
.splash .constrain-contain .slide-container .multi {
  background-image: url(../images/headshot.png);
  background-repeat: no-repeat;
  background-color: #a0adb7;
  background-size: cover;
  background-position: top center;
  -webkit-transition: all 1.5s ease-in-out;
  -moz-transition: all 1.5s ease-in-out;
  -o-transition: all 1.5s ease-in-out;
  -ms-transition: all 1.5s ease-in-out;
  transition: all 1.5s ease-in-out;
}
@media (min-width: 540px) and (max-width: 1200px) {
  .splash .constrain-contain .slide-container {
    margin-left: -3em;
  }
}
.splash .constrain-contain .slide-container2 {
  display: inline;
  font-family: "Abolon";
}
.splash .constrain-contain .slide-container2 .slide2 {
  width: 350px;
  height: 450px;
  margin: 0px;
  margin-right: 0;
  display: inline-block;
  vertical-align: top;
  border: 1px solid lightgrey;
  color: white;
  text-align: justify;
  cursor: pointer;
  cursor: hand;
}
@media (min-width: 540px) and (max-width: 1200px) {
  .splash .constrain-contain .slide-container2 .slide2 {
    width: 300px;
    height: 400px;
  }
}
.splash .constrain-contain .slide-container2 .transform2 {
  overflow: hidden;
}
.splash .constrain-contain .slide-container2 .transform2 img {
  -webkit-transition: all 1s ease-in-out;
  -moz-transition: all 1s ease-in-out;
  -o-transition: all 1s ease-in-out;
  -ms-transition: all 1s ease-in-out;
  transition: all 1s ease-in-out;
}
.splash .constrain-contain .slide-container2 .transform2:hover img {
  transform: translateX(350px);
}
.splash .constrain-contain .slide-container2 .background,
.splash .constrain-contain .slide-container2 .multi2 {
  background-image: url(../images/jess.jpg);
  background-repeat: no-repeat;
  background-color: #a0adb7;
  background-size: cover;
  background-position: top center;
  -webkit-transition: all 1.5s ease-in-out;
  -moz-transition: all 1.5s ease-in-out;
  -o-transition: all 1.5s ease-in-out;
  -ms-transition: all 1.5s ease-in-out;
  transition: all 1.5s ease-in-out;
}
@media (min-width: 540px) and (max-width: 1200px) {
  .splash .constrain-contain .slide-container2 {
    margin-left: 2em;
  }
}
@media (max-width: 768px) {
  .splash {
    margin-top: 6em;
    width: 100%;
  }
}
.container {
  margin-bottom: 3em;
  text-align: center;
}
.container h2 {
  font-family: "Oswald-Bold";
}
.container .mini-container {
  margin-bottom: 2.8em;
}
.container .mini-container .mini-image1 {
  height: 10em;
  width: 100%;
  background-image: url(../images/computer-study.jpg);
  background-size: cover;
  background-color: #a0adb7;
}
.container .mini-container .mini-image2 {
  height: 10em;
  width: 100%;
  background-image: url(../images/responsive-design.jpg);
  background-size: cover;
  background-color: #a0adb7;
}
.container .mini-container .mini-image3 {
  height: 10em;
  width: 100%;
  background-image: url(../images/colors-wheel.jpg);
  background-size: cover;
  background-color: #a0adb7;
}
.container .mini-container p {
  font-family: "Oswald-Light";
  text-align: left;
  font-size: 1.15em;
}
@media (max-width: 700px) {
  .container .mini-container p {
    font-size: 1.65em;
    text-align: center;
  }
}
.container .mini-container .btn {
  background-color: #c2bba8;
  color: #233237;
  font-family: "Abolon";
  -webkit-transition-duration: 0.4s;
  /* Safari */
  transition-duration: 0.4s;
}
.container .mini-container .btn:hover {
  background-color: #233237;
  color: #c2bba8;
}
@media (max-width: 700px) {
  .container .mini-container .btn {
    font-size: 1.5em;
  }
}
div.footer-container {
  background-color: #233237;
  clear: both;
  color: #c2bba8;
  width: 100%;
}
div.footer-container #footer-contents {
  width: 75%;
  margin: auto;
}
div.footer-container #footer-logo {
  float: left;
  height: 15em;
  line-height: 15em;
}
div.footer-container #footer-logo img {
  color: #c2bba8;
  padding-top: .15em;
  width: 12em;
}
@media (max-width: 700px) {
  div.footer-container #footer-logo {
    text-align: center;
    float: none;
    width: 100%;
  }
}
div.footer-container .footer-links ul {
  padding-top: 1.9em;
}
div.footer-container .footer-links li {
  list-style: none;
  padding-top: .3em;
  font-size: 1.5em;
  font-family: "Oswald-Bold", "Abolon", sans-serif;
  font-weight: 400;
}
div.footer-container .footer-links a {
  color: #c2bba8;
}
div.footer-container .footer-links a:hover {
  color: #F4F4F4;
  text-decoration: none;
}
div.footer-container #footer-social {
  height: 15em;
  line-height: 15em;
  float: right;
}
div.footer-container #footer-social .btn {
  background-color: #c2bba8;
  color: #233237;
  border-radius: 0.5em;
  margin-bottom: 0.5em;
  -webkit-transition-duration: 0.4s;
  /* Safari */
  transition-duration: 0.4s;
}
div.footer-container #footer-social .btn:hover {
  background-color: #F4F4F4;
}
div.footer-container #footer-social a {
  color: #c2bba8;
  text-decoration: none;
}
div.footer-container #footer-social a:hover {
  color: #F4F4F4;
}
div.footer-container #footer-social .fa-facebook-square {
  font-size: 5em;
}
div.footer-container #footer-social .fa-twitter-square {
  font-size: 5em;
  padding-left: .3em;
}
@media (max-width: 700px) {
  div.footer-container #footer-social {
    float: none;
    text-align: center;
    line-height: 0em;
    height: auto;
  }
}
div.footer-container #copyright {
  text-align: center;
  margin-top: -2em;
  font-size: 1.2em;
  font-family: "Abolon", "Oswald-Light", sans-serif;
  font-weight: 300;
}
@media (max-width: 700px) {
  div.footer-container #copyright {
    margin-top: 0em;
    bottom: 0;
  }
}

---

如果您使用的是git，您可以进行二等分，并查看何时引入错误

---

请参阅

上的文档，我认为这通常意味着您的html元素内容溢出。尝试添加：

html，body{overflow-x:hidden；}

，看看这是否有帮助。但这并不能真正解决问题。解决真正的问题是找出哪个DOM元素溢出并修复该元素。没有人能帮你解决这个问题，除非你把问题隔离出来并分享你的代码。我不知道对分。谢谢你的信息！