WordPress CSS media queries work on desktop resize but not on real mobile devices [closed]

I'm building a custom WordPress theme and trying to apply some mobile-specific CSS using media queries. Here's an example of what I'm using:

@media (max-width: 700px) {
    /* mobile styles */
    body {
        background-color: lightblue;
    }
}

When I resize my browser window on desktop, the styles apply perfectly. But when I open the site on an actual mobile phone, none of the styles inside the media query seem to apply.

I'm not using any plugins—just pure CSS added to my theme. I’ve confirmed that the CSS file is loading correctly.

Is there anything in WordPress or HTML that might be preventing the media query from working on mobile devices? Do I need to add a meta viewport tag or something else in the header?

Any help would be appreciated. Thank you!