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

【问题标题】：HTML/CSS: How to prevent Android and iPhone browsers from upscaling background imagesHTML/CSS：如何防止 Android 和 iPhone 浏览器放大背景图像
【发布时间】：2012-04-05 00:55:44
【问题描述】：

我在移动浏览器中遇到了将媒体查询与背景图像结合使用的问题

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

移动浏览器需要上面的元标记来响应媒体查询（否则浏览器会假装它有更大的屏幕并缩小页面），问题是这个元标记在使用时也会放大所有背景网站上的图片。这完全破坏了页面的设计。

我希望所有浏览器以 1:1 的比例表示页面的每个元素。

如何使媒体查询正常工作，但防止浏览器放大页面中的背景图像。简而言之，我希望页面被视为与桌面浏览器中的页面相同。

Android 和 iPhone 浏览器都会出现同样的问题。

【问题讨论】：

为什么在高 DPI 单元上运行的浏览器只放大部分元素而不放大整个页面？这势必会引入问题，这又是IE的问题！

标签： android iphone html css media-queries

【解决方案1】：

您是否尝试过使用固定的 background-size 属性，例如。 background-size:100px 100px;

【讨论】：

是的，问题是我突然必须总是指定在每个有背景图像的元素上，开始的地方似乎是错误的。我不能阻止浏览器吗从一开始就缩放它们？
有没有人有任何其他的解决方案，完全禁用浏览器缩放？

【解决方案2】：

是的，您必须在元标记中使用缩放：

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

【讨论】：