イメージのモバイル自動スケーリング

Question

私は基本的な静的S.P.A.を持っています。私はラップトップで開発するときに私が望むようにスタイリングしています。モバイルビューポートでテストし、上下にスクロールすると画像/コンテンツのサイズが変更されます。私はそれがクロームモバイルブラウザに組み込まれていると信じていますが、これを無効にしたりスタイルを変える方法があるのだろうかと思います。コンテンツのセクションのいくつかは、上に重ねられたテキストを含む完全な背景画像を利用する。ユーザーがスクロールして画像のサイズが変更されると、コンテンツは次のセクションにプッシュされますが、クリーンエンドポイントを持ちます。私はそれが可能であることを知っています。なぜなら、この問題がないモバイルページを常に使用しているからです。私はちょうどそれを行う方法を知らない。私が見ることができる

.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

1つの問題は、例えば、landingImageとtitleContainerのdivは、その高さがビューポートの幅を基準に設定されているということです

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

これは、ビューポートは広い400ピクセルを言うのであれば意味、.landingImageのdivが400ピクセル高くなり、これは十分ではないかもしれません。

1つの選択肢は、CSSで@mediaクエリーを使用し、ビューポートの幅に基づいてこれらのdivの高さを調整することです。例えば

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

もう1つの可能性は、既存のCSSでは、divが一定の最小値を下回らないようにルールを追加することです。

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

あなたは@mediaメディア文の任意の数を設定し、あなたのページの仕様に一致するように設定を絞り込むことができます。

幸運を祈る！