I have a simple script:
<style>
@media only screen and (max-width: 600px) {
body { background-color: red; }
}
</style>
<body>test</body>
This works fine on my PC. However, on my phones (both 2 of them), regardless of the browser, it doesn't work. Only when I change the max-width to 980px that it changes red. Obviously my phones aren't that large. I try to add this ruler, and while its length is fixed on PC (as a good ruler should be), on my phones it's shrunk.
Do you know why is that?
Make sure you have set a viewport meta tag inside your head tag. Mobile devices will usually use a virtual viewport to display websites. The meta tag tells the browser how it should display the site on mobile.
<meta name="viewport" content="width=device-width, initial-scale=1">
The width=device-width tells the browser that it should set the virtual viewport to be the width of the device, and initial-scale=1 sets the default zoom level.