When Apple introduced the iPhone, very little of the web was optimized for 320 pixel viewports. So the iPhone rendered pages as if it had a 980 pixel viewport, and scaled them down to fit.

In order to optimize for the 320 display, Apple recommended defining the scale and width via the viewport meta tag, and styling the content using CSS3 media queries.

Flash forward 11 years!

Now Apple’s bringing the web to the Apple Watch. The Watch comes in two sizes with viewports that are effectively 136 and 156 CSS pixels wide. Very little of the web is optimized for these ultra-tiny displays. So the Watch renders pages as if it has a 320 pixel viewport, and scales them down to fit.

But the Watch wants to scale all those viewport-optimized pages as well, so it ignores the initial-scale value of the viewport meta tag, and presents itself as having a 320 CSS pixel width to media queries.

So how do you optimize web content for the Watch? Moar meta tags!!1

<meta name="disabled-adaptations" content="watch" />

This disables the override and allows the Watch to present itself with its true viewport width.

*cough* Also, no web fonts. *\cough*

Elsewhere:

• Designing Web Content for watchOS

I went for a hike with my dad! (Recorded this one with Gaia GPS.)

I wanted an Apple Music version of the playlist at the end of this New York Times article. So I made this:

I love playlists like this, and I realize there’s no lack of them, but I’m terrible at finding them.