Mobile Websites: the Viewport Meta Tag
If you're starting out making a website work on mobile, the viewport meta tag is important.
My website looked so much smaller on mobile than if I just made the browser window thinner and I had no idea why. I looked it up, and most of the answers suggested using the @media (width) query to target thin screens. There were also some that suggested the viewport meta tag, but I didn't know what that was, so I thought "pfft that won't work" and ignored it.
So I tried using @media to make the font bigger if the screen width was below 500px. That solved the problem for mobile, but made the text in my thin desktop browser window huge. So I kept looking, eventually found the viewport meta tag again, tried it out of desperation, and everything just worked.
<meta name="viewport" content="width=device-width, initial-scale=1" />
This tag goes between <head> and </head> in your html file. (More information)
The problem was that mobile browsers, if they don't see a meta viewport tag, scales everything down, including the size of a px, etc. The content="width=device-width part tells the browser to not scale things down. The initial-scale=1 part is not important in this scenario, but a bunch of answers include it with content=, so I might as well explain it. It makes the browser's pinch-gesture zoom level be set to 1, which is the default anyways, so theoretically it won't make a difference if you take it out.
For a more detailed explation, see https://developer.mozilla.org/en-US/docs/Web/HTML/Viewport_meta_tag
I think a lot of guides for responsive web design/mobile-friendly web design don't mention this, or only put it towards the end. Which is not that great. Surely it's not just me that struggled for so long with @media to no avail.
text-size-adjust
Another thing I noticed was the font would get bigger if I made my phone landscape. But not the font of the entire page, only the default body text font, so everything was not only bigger than necessary but also out of proportion. After looking it up again, I found this answer that suggested using text-size-adjust.
I put text-size-adjust: none; into my css, and it didn't work. I then tried the browser-specific versions suggested in the answer, and also set them to 100%.
-webkit-text-size-adjust: 100%;
-moz-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
That worked!
// End.
it's an open access article!