Trying to figure out why my website doesn't appear to be responsive on my phone or when I enter responsive design mode in the Firefox developer inspector, despite the fact that I designed it to be responsive and it works fine on my laptop.
When I resize my viewport to a smaller size, the size of the body gets stuck at a large value even though the inspector says the viewport is much smaller than that. Checking through the CSS code, I don't see any obvious places where I might be causing this to happen.
I talked to a friend about this and they pointed out that I was missing the viewport meta tag:
<meta name="viewport" content="width=device-width, initial-scale=1">
Adding this node to the head
element
fixes the problem. Thanks Mia!
I'm wondering what exactly it means when the tag is missing. Looking up documentation on the viewport tag gives a clue:
When a page is not made responsive for smaller viewports it looks bad or even breaks on a smaller screen. To fix this problem introduce a responsive tag to control the viewport. This tag was first introduced by Apple Inc. for Safari iOS.
https://www.geeksforgeeks.org/html/html-viewport-meta-tag-for-responsive-web-design/
It looks like this is yet another backwards-compatible fix for web pages. However, I was unable to determine if there is a standard on how browsers should behave if it is missing.