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.