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"/>

Answer 2

您无法禁用单个元素的缩放。

您可以对整个文档执行此操作（通过viewport元标记），但这可能会使某些用户无法访问网站（因为图片和文字可能太小......）。

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

2 个答案: