Media query does not work on a phone but does in a desktop browser

Question

Media query

@media screen and (min-device-width : 320px) and (max-device-width : 480px) {
    // code
}

gets executed when I load the webpage using the Inspect element responsive tester (Firefox). But it does not work when I load the webpage on a mobile device (tried Chrome, Opera GX and Safari).

For clarification, I do have my viewport set with <meta name="viewport" content="width=device-width,initial-scale=1.0"> and I tried every other meta tag I could find on here.

Answer 1

@media (min-width: 320px) and (max-width: 480px) {
    // code
}