html - 图像的移动自动缩放

Question

我有一个基本的静态 S.P.A.当我在笔记本电脑上开发时，我已经按照我想要的方式设计了样式。当我在移动视口(viewport)上测试并向上或向下滚动图像/内容时调整大小。我相信它内置于 chrome 移动浏览器中，但我想知道是否有办法禁用它或围绕它设置样式？一些内容部分使用完整的背景图像，上面覆盖了文本。当用户滚动并且图像调整大小时，它会将内容推送到下一部分，而不是有一个干净的结束点。我知道这是可能的，因为我一直使用没有这个问题的移动页面。我只是不知道该怎么做。

    .landingImage {
    width: 100vw;
    height: 100vh;
    background-image: url('https://upload.wikimedia.org/wikipedia/commons/6/6f/Black_gram.jpg');
    background-position: right;
    background-size: cover;
    margin-left: auto;
    margin-right: auto ;
    }

    .titleContainer {
    position: absolute;
    width: 85vw;
    height: 75vh;
    margin: auto;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    border: 2px solid white;
    font-family: 'Open Sans Condensed', sans-serif;
    font-size: 16vw;
    color: white;
    text-shadow: 1px 1px black;
    }

    .titleText {
    margin-top: 10px;
    margin-left: 10px;
      }

<meta name="viewport" content="width=device-width, initial-scale=1.0">

    <div class="landingImage">
    <div class="titleContainer">
        <h1 class="titleText">SHIFT<br>WORKS<br>BICYCLE<br>OPERATIONS</h1>
    </div>
</div>

Answer 1

我能看到的一个问题是 landingImage 和 titleContainer div 的高度是相对于视口(viewport)宽度设置的，例如

.landingImage {
 ...
 height: 100vh;  
 ...
}  

这意味着如果视口(viewport)为 400px 宽，.landingImage div 将为 400px 高，这可能还不够。

一种选择是在 CSS 中使用 @media 查询并根据视口(viewport)宽度优化这些 div 的高度。例如

@media screen and (max-width: 480px) {
 .landingImage {
     height: 200vh; 
   }     
}

另一种可能性是，在您现有的 CSS 中添加规则，以便 div 不会缩小到某个最小值以下，例如

.landingImage {
  ...
  min-height: 800px  
  ...
}

您可以设置任意数量的@media 媒体声明并优化设置以匹配您页面的具体情况。

祝你好运!