android - HTML/CSS : How to prevent Android and iPhone browsers from upscaling background images

Question

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

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

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

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

我怎样才能使媒体查询正常工作，同时阻止浏览器放大页面中的背景图像。简而言之，我希望页面像在桌面浏览器中一样被处理。

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

Answer 1

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