Guys help out. There is a site that I create. Made the logo saved in .png and uploaded to the site. From the computer, everything looks superbly, but from the mobile version of the site is blurry. In this case, I used the tag <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"> . I checked the code from sites like VK and FACEBOOCK, the html code and css are exactly the same. What to do? I will add: here are the screenshots of the PC version: enter image description here

Well, the mobile version: (Yes, the line is black, I just test @media) enter image description here

The image of the logo has become muddy as well as the image of the captcha.

  • In vain you disable scaling - vp_arth

1 answer 1

On the mobile version, 1 pixel of graphics is displayed on 4th, 9th, etc. physical pixels, depending on the pixel density of a particular device. Accordingly, the graphics should be more detailed for display on high DPI screens.

There are 2 options:

  1. Make pictures in SVG vector format (for now, go to vector).

  2. Make the pictures 2 or 3 times larger and shrink them during layout.

(In the css code, rules like background-size did not observe)

Here, for example, VK, if you do not believe me on the word:

enter image description here

enter image description here

  • Why VK and Faceboock make the logo in .png the exact size and do not reduce it? (I did not observe the rules of the background-size type in the css code) - Jakes
  • @ DanilPolyansky Because you had to look in the mobile version. Updated the answer. - Crantisz