Question

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

＆＃13;

    .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;
      }

＆＃13;

<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>

＆＃13;

Answer 1

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

>>> pd.DataFrame(dict1).applymap(lambda x: 1/float(x)).to_dict()
{'Ann': {'cats': 0.25, 'dogs': 0.33333333333333331},
 'Bob': {'cats': 0.16666666666666666, 'dogs': 0.20000000000000001},
 'Chris': {'cats': 0.125, 'dogs': 0.14285714285714285},
 'Dan': {'cats': 0.10000000000000001, 'dogs': 0.1111111111111111}}

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

一种选择是在CSS中使用@media查询，并根据视口宽度细化这些div的高度。 e.g。

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

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

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

您可以设置任意数量的@media媒体语句并优化设置以匹配页面的细节。

祝你好运！

移动自动缩放图像

1 个答案: