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

Question

我需要有一个100%宽度、100%高度和位置固定的图像。一切都很好，但我在移动设备上遇到了一些问题。例如，在Iphone上，当我使用缩放时，图像会缩放，过一会儿它会跳回100%/100%。如何避免这种情况，比如说禁用特殊div的缩放？还是使用jquery使形状div与视口大小相同更好？或者…？

.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显示导航栏时，形状改变了大小（这是有道理的），但我如何避免这种情况？

非常感谢您！

Answer 1

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

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

Answer 2

不能禁用单个元素的缩放。

您可以对整个文档（通过viewport元标记）这样做，但这可能会给一些用户留下一个不可用的网站（因为图像和文本可能太小…）。