时间戳

首页 > 解决方案 > 网站从浏览器到平板电脑都有响应，但在移动设备上没有响应。我该如何纠正？

javascript - 网站从浏览器到平板电脑都有响应，但在移动设备上没有响应。我该如何纠正？

问题描述

我使用 HTML、CSS、Bootstrap 4 和 jQuery 制作了一个投资组合网站。该网站似乎在浏览器和平板模式下运行良好。但是，当我在手机上查看该网站时，我似乎能够滚动到一个空白区域，我的横幅图像中的文本似乎被截断，并且“关于我”部分中的我的图像缩小到没有。如果我没有很好地解释，该网站是 www.reallybilly.com。

我玩过不同的观点，并尝试过使用@media 的不同宽度，但似乎没有任何效果。

body,
html {
height: 100%;
max-width: 100%;
}

.banner {
 background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 
 0.5)),
 url("../imgs/city/IMG-5676.JPG");
 height: 100vh;
 width: 100%;
 background-position: center;
 background-repeat: no-repeat;
 background-position: center;
 background-size: cover;
 position: relative;
 }

 .text-box {
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: auto;
 }

我希望让它完全响应，而不必重做整个项目。

标签： javascriptjqueryhtmlcssbootstrap-4

解决方案

通过检查您的网站，删除“填充：100px；” 来自您的#about CSS 作业。该填充是导致它在移动设备上的原因。

更好的是，仅在平板电脑或更大的视口上使用 @media 来设置填充。

推荐阅读