Viewport, a PSA

The HTML meta viewport tag is important for mobile and accessibility. A significant number of hobby tech sites don’t use it, but you should. It’s free and you don’t even need to learn CSS.

Here’s an example website.

<!DOCTYPE html>
<html>
	<head>
		<title>Who likes soup?</title>
		<meta name="viewport" content="width=device-width, initial-scale=1">
	</head>
	<body>
		You love soup, I know you do.
	</body>
</html>

There’s one very important line. It’s not the one about soup. It’s this one.

<meta name="viewport" content="width=device-width, initial-scale=1">

This tells your browser to render the page at the width of the device. The initial-scale=1 sets the zoom level on page load. Small devices like phones will render at a larger width, then shrink the content until it fits, often making the site completely unreadable.

This tag is magic. It makes things suck less on mobile without any CSS.

Starting from nothing, isn’t this technically a website?

You love soup, I know you do.

I mean, sure, and if you serve just that text your browser may insert html/head/body tags. It will even infer a title based on how this site is loaded. But you know what it doesn’t do? It doesn’t give you the meta viewport tag.

There’s fantastic documentation here and you can read it if you like. There’s a decent stack overflow post, which again, read if you like. This one even has a before and after picture.

The Mozilla docs go so far as to have an accessibility Warning!

Warning: Usage of user-scalable=no can cause accessibility issues to users with visual impairments such as low vision. WCAG requires a minimum of 2× scaling; however, the best practice is to enable a 5× zoom.

They should really warn against the omission of the tag! If it is recommended to have the ability to have 2x-5x scaling, guess what an outlier is? The 0.25x-0.5x scaling you get by default when you omit this tag.

Addressing accessibility issues raises the quality of life for everyone. You don’t need a wheelchair to enjoy curb cuts. You know who else gets the benefit of pages accessible to low vision? Folks with small phones.

You know who has small phones? Other nerds who read your posts before they’re awake. I love my RSS feeds. I love slowly waking up to the most esoteric weird shit y’all have been up to. But I struggle to do that if I can’t read it.

If there’s such fantastic documentation, why would I bother writing this? Because too many of my fellow nerds do not know! Of course I want it to be safe to not know things. Maybe you did not know this. That is okay! But now you do now, and so please change it.

I know the lot of you, and the lot of you know who you are. The self-host-ers, do-it-yourself-ers, bake it from scatch-ers. You roll your own because whatever you did to get that thing hosted was absolutely not acceptable in the workplace.

Let me tell you, it is so damn rad that your site is running on a PCB you designed. It really is. But do you know what would be even more so? Including that damn tag.

<meta name="viewport" content="width=device-width, initial-scale=1">

Here it is one more time for you, it hasn’t changed.

<meta name="viewport" content="width=device-width, initial-scale=1">

Sorry, once more for those in the back?

I’m once again asking for you to include this tag. Bernie Meme.

Please just put the tag in your <head>. Libraries vs framework be damned, just put this tag in your <head>.

Did you write the language that serves your blog? Hell yea, that is so cool. Put the damn tag in your <head>.

Have proudly served the same site for 20 years? Congrats, you’ve pre-dated the viewport meta tag. You’ve also had ample time to adopt the change. The context under which you publish is different now. You don’t even need to add CSS, just put this damn tag in your <head>.

<meta name="viewport" content="width=device-width, initial-scale=1">

Please just add the tag.

Viewport, a PSA

Posts