jquery - 图像 100%/100% 如何在移动设备上禁用缩放

Question

我需要一张图片，宽度为 100%，高度为 100%，位置固定。一切正常，但我在移动设备上遇到了一些问题。例如在 Iphone 上，当我使用缩放功能时，图像会缩放，片刻之后它会跳回到 100%/100%。我怎样才能避免这种情况，让我们说禁用特殊 div 的缩放？还是使用 jquery 使 shape-div 与视口(viewport)大小相同更好？或者……？

.shape{

width: 100%;
height: 100%;

z-index: 2; //there are elements under this shape
position:fixed; 

left: 0;
right: 0;
top: 0;
bottom: 0;

background-image: url("shape.png");
background-repeat: no-repeat;
background-size: cover;

background-origin: content-box;
background-position:center;
}   

下一个问题是:当 Safari 显示导航栏时，Shape 改变了它的大小(这是有道理的)，但我该如何避免这种情况呢？

非常感谢您!

Answer 1

不确定这是否是您想要的，但您可以完全禁用缩放功能:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/>