All geek questions in one place

HTML / CSS: how to prevent Android and iPhone browsers from scaling background images

I have a problem in mobile browsers using media queries when compiling background images

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

The meta tag above is necessary for mobile browsers to respond to multimedia requests (otherwise the browser pretends to have a larger screen and reduces the page scale), the problem is that this meta tag also scales the entire background of the image on the site when used. This completely violates the design of the page.

I want all browsers to represent every element of the page in a 1: 1 scale.

How can I make media processors work, but I do not allow the browser to increase the background images on the page. In short, I want the page to be processed just like in a desktop browser.

The same problems occur in both Android browsers and the iPhone.

+4
source share
2 answers

You tried to use the fixed background-size property, for example. background-size:100px 100px;

+2
source

Yes, you should use scaling in the meta tag:

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

Source: https://habr.com/ru/post/1402455/

More articles:


All Articles