Сохранять размер видового экрана в мобильных браузерах

Question

Переполнение стека.

У меня есть элемент изображения, размер которого зависит от вида браузера. Однако на мобильном сафари и других сайтах, когда окно URL вверх сверху сокращается, оно также увеличивает размер окна просмотра, заставляя элемент изображения «перестраиваться». Есть ли способ изменить размер окна просмотра, сделать «начальный» размер видового экрана постоянным размером для изображения? Я не хочу, чтобы элемент изменял размер, даже если область просмотра меняет размеры; Я хочу, чтобы элемент оставался размером «начального» видового экрана.

Код:

HTML:
<div class="block block-large cover-background flex flex-middle **height-viewport** contrast" style="background-image: url(http://win3movement.org/images/win3header_blank_.jpg)"> ... </div>

CSS:
.uk-block {padding-top: 50px;padding-bottom: 50px;}
.block-large {padding-top: 20px;padding-bottom: 20px;}
.cover-background {background-position: 50% 50%;background-size: cover;background-repeat: no-repeat;}
.flex {display: -ms-flexbox;display: -webkit-flex;display: flex;} .flex-middle {-ms-flex-align: center;-webkit-align-items: center;align-items: center;}
.height-viewport {height: 100vh;min-height: 600px;}

Спасибо!

Answer 1

Но когда панель инструментов исчезает, сайту нужно заполнить больше места, не так ли? Вы можете решить это с помощью медиа-запросов, но поскольку веб-сайты не предназначены для одного устройства, но для всех из них это усложняется. Итак, как насчет этого решения: мы добавляем изображение с фиксированным размером и обрезаем его до размера окна браузера. Чтобы решить эффект прокрутки, мы придерживаемся нашего контейнера снизу. Когда бар исчезнет, ​​дополнительное место должно быть добавлено наверху

<div class="container"> 
<img class="image"> 
</div> 

.container{ 
width:100℅; 
height:100%; 
overflow:hidden; 
display:fixed; 
bottom:0px; 
left:0px; 
} 

.image{ 
position:fixed; 
bottom:0px; 
left:0px; 
height:auto; 
width:auto; 
*/depends on your image/* 
min-width:500px; 
}