HTML/CSS：如何防止Android和iPhone浏览器放大背景图片

Question

我在移动浏览器中使用媒体查询和背景图片时遇到了问题。

<meta name="viewport" content="width=device-width" />

上面的meta标签是为了让移动浏览器响应媒体查询（否则浏览器会假装它有更大的屏幕并缩小页面），问题在于当使用这个meta标签时，它也会放大站点上的所有背景图像。这完全破坏了页面的设计。

我希望所有的浏览器在比例尺为1:1的情况下呈现页面的每个元素。

如何使媒体查询正常工作但又防止浏览器放大页面中的背景图片？简而言之，我希望页面在移动浏览器上与桌面浏览器中看起来一样。

在Android和iPhone浏览器中都存在同样的问题。

- tirithen

---

为什么在高 DPI 单位上运行的浏览器只会放大某些元素而不是整个页面？这肯定会引入问题，这又是 IE 的问题所在！ - tirithen

Answer 1

您尝试过使用固定的 background-size 属性吗？例如：background-size:100px 100px;

- Samuli Hakoniemi

---

是的，这个问题在于我突然不得不始终在每个具有背景图像的元素上指定它，这似乎是错误的开始。我不能只是防止浏览器首先对它们进行缩放吗？ - tirithen

有没有其他解决方案，可以完全禁用浏览器缩放？ - tirithen

Answer 2

是的，您必须在meta标签中使用缩放：

<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />

- burn0050