mobile web
I am currently building a Rails application in the spirit of making your own solution. My primary use case will be mostly on mobile, but I started working on the interface for desktop. Rookie mistake.
This is the preview I relied on when I was building the frontend.
Not too bad, right?
I was done for the day and felt like showing it to some people for input, so I opened it from my phone to take a screenshot with URL they can access.
Surprise! What is this? Web for ants?
With my lack of CSS experience, I was too sure that I messed it up. Apparently I didn’t.
Thanks to a friend of mine for pointing out that web development is a bunch of hacks a la toothpicks and gums, who then provided this one-liner (indented for readability) fix:
<meta name="viewport"
content="width=device-width,initial-scale=1">
Et voilà!
I don’t understand why this isn’t the default or why browsers don’t automatically do this.
I do wonder if there are other values where developers would rather have the width
/ initial-scale
to be something else.
Here’s obligatory Peter Griffin CSS GIF depicting me on my computer for the last day.