在移动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; 
}