モバイルWebブラウザでビューポートサイズを静的に保持する

Question

スタックオーバーフロー。

私のウェブサイト（http://win3movement.org）には、ブラウザのビューポートのサイズである画像要素があります。しかし、モバイルSafariなどでは、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

しかし、ツールバーが消えると、サイトはより多くの領域を埋める必要がありますか？ これはメディアクエリで解決できますが、Webサイトは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; 
}