在移動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

但是，當工具欄消失，該網站需要填補更多的空間，不是嗎？ 你可以通過媒體查詢來解決這個問題，但是因爲網站並不是針對一種設備設計的，而是針對所有設備而言，這會變得複雜。那麼這個解決方案呢：我們添加一個固定大小的圖像並將其裁剪到瀏覽器的窗口大小。 爲了解決滾動效果，我們將容器粘貼到底部。 當條消失時，應在頂部添加額外空間

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