CSS media queries interpret resolution rather than viewport

Question

I made an HTML page and a CSS file. I created media queries to display this page correctly on different devices.

Everything is fine except on a Samsung A51 (android). This mobile interpret the CSS media query for resolution > 1000 pixels rather than interpret the media query for resolution = 414px.

As you can see on this website, Samsung A51 have a resolution 1080x2400 and 405PPI: https://phonesdata.com/fr/smartphones/samsung/galaxy-a51-5458463/#techspec

I don't understand why. However i clearly indicate the meta tag:

<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />

Here is the CSS interpreted:

h3 {
    max-width: 70%;
    text-align: center;
    font-weight: 800;
    color: #13A538;
    margin: 5rem auto 1rem;
    font-size: 2.5rem;
    margin-bottom: 30px;
}

Here is the media querie that should be interpreted:

@media screen and (min-width: 414px) {
            h3{
                font-weight: 500;
                /* color: #13A538; */
                color: pink;
                margin: 2rem auto 1rem;
                font-size: 1.5rem;
            }

EDIT: My break points:

@media screen and (max-width: 360px)
@media screen and (min-width: 414px)
@media (min-width: 576px)
@media (min-width: 768px)
@media (min-width: 992px)
@media (min-width: 1200px)

@Greg-- you think it's necessary to add you media querie ?

Note that the `` tag does not use and does not need a closing slash and never has in any HTML specification. — Rob, Oct 07 '21 at 09:45
@Alexking2005 NO, i mean to change all min-width to max-width, but its not necessary, in your media queries with width from 360px to 414px what media will be working? If you use min-width add min-width: 300px not 360 [resolution stat](https://gs.statcounter.com/screen-resolution-stats/mobile-tablet/worldwide/#monthly-201701-202109) — Greg--, Oct 20 '21 at 08:26
Please check [this post](http://sourcejedi.blogspot.com/2012/01/alternative-to-nameviewport.html) And [this](https://stackoverflow.com/a/16499602/14135825) maybe you can use `device-pixel-ratio`. Try to create a [mre] — Greg--, Oct 20 '21 at 08:41

Greg-- · Answer 1 · 2021-10-20T08:18:07.160

Samsung A51 has viewport size 412x915px, change you media querie to:

@media screen and (min-width:320px) {
        h3{
            font-weight: 500;
            /* color: #13A538; */
            color: pink;
            margin: 2rem auto 1rem;
            font-size: 1.5rem;
        }
}

320px - is min almost all devices, but better use max-width

How can you calculate viewport:

Samsung A51 resolution: 1080x2400px

Density: 2.625 (resolution 405px/inch to viewport 154px/inch)

viewport:

width: 1080/2.625=411,4px
height: 2400/2.625 = 914.2px

UPD

This Samsung stil display this media queries: @media (min-width: 1200px)

Please check and check on your Samsung

Please try to check on different mobile browsers (Samsung browser and Chrome) - does it have same issue?

For detect mobile device you can use:

@media only screen and (hover: none) and (pointer: coarse) - for detect touch sreens link;
orientation: portrait - link;

Thank you Greg, i didn't know this calculation. But i still have the issue on the A51. This Samsung stil display this media queries: @media (min-width: 1200px) I don't know why, i think Android display website for desktop. — Alexking2005, Oct 19 '21 at 15:47

CSS media queries interpret resolution rather than viewport

1 Answers1