Мобильное автомасштабирование изображений

Question

У меня есть базовый статический S.P.A. что я получил стиль, как я хочу, развиваясь на ноутбуке. Когда я тестирую на мобильном видовом экране и прокручиваю вверх или вниз по размеру изображения/контента. Я считаю, что встроен в браузер Chrome 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 имеют их высоты устанавливается по отношению к ширине окна просмотра, например,

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

Это означает, что если окна просмотра говорят 400px в ширину, .landingImage DIV будет 400px высоким, и это может быть не достаточно.

Один из вариантов заключается в использовании запросов @media в CSS и уточнении высоты этих разделов на основе ширины видового экрана. например

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

Другая возможность заключается в том, что в существующем CSS добавить правило так, чтобы DIV не брезгует ниже определенного минимума, например,

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

Вы можете установить любое количество операторов мультимедиа @media и уточнить параметры, соответствующие спецификациям вашей страницы.

Удачи вам!