Greetings. I have Huawei Y5c resolution in my hands

  1. screen with a resolution of 854 x 480 pixels and a pixel density of 218ppi (tech. har-ki)
  2. 320x570 - shows the Ya. Metric. Myresolutionis.ru Opera - screen 480 * 680 and browser screen 300 * 425; Google - 480 * 855 screen and 320 * 488 browser screen; UC - 720 * 1281 screen and 320 * 496 browser screen

I created a page where css

body { background: red;} @media (min-width: 480px) { body { background: green;}} @media (min-width: 768px) { body { background: black;}} @media (min-width: 992px) { body { background: yellow;}} @media (min-width: 1382px) { body { background: blue; }}

I go through the opera, the background is red - in principle, it is clear. When I go through Google or UC Browser, the background is black - I can not understand why? After all, I hold the phone upright it max. width 720 (1281 - height)?

  • Follow this link from different browsers and share the results: myresolutionis.ru - MasterAlex
  • Opera - 480 * 680 screen and 300 * 425 browser screen; Google - 480 * 855 screen and 320 * 488 browser screen; UC - 720 * 1281 screen and 320 * 496 browser screen - Mikhail Sosnin
  • one
    They write about Opera Mini that it does not respond to media queries at all, so it’s quite logical that the default red background is taken, and about chrome and UC, you have this line in the code: <meta name="viewport" content="width=device-width, initial-scale=1"> ? Without this line, there will be no adequate response to media queries. - MasterAlex
  • MasterAlex - there was no, thanks, now everything has become clearer! - Mikhail Sosnin

1 answer 1

In the head you need to insert

 <meta name="viewport" content="width=device-width, initial-scale=1">