图片 100%/100% 如何在移动设备上禁用缩放答案

【问题标题】：Image 100%/100% how to disable zoom on mobile device图片 100%/100% 如何在移动设备上禁用缩放
【发布时间】：2014-10-15 16:09:58
【问题描述】：

我需要一个 100% 宽度和 100% 高度和位置固定的图像。一切正常，但我在移动设备上遇到了一些问题。例如在 Iphone 上，当我使用缩放时，图像会缩放，片刻之后它会跳回 100%/100%。我怎样才能避免这种情况，让我们说禁用特殊 div 的缩放？还是使用 jquery 使 shape-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 显示导航栏时，Shape 改变了它的大小（这是有道理的），但我怎样才能避免这种情况呢？

非常感谢您！

【问题讨论】：

标签： jquery html css responsive-design

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

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

您可以为整个文档这样做（通过viewport 元标记），但这可能会使某些用户无法使用网站（因为图像和文本可能太小......）。

【讨论】：