Ch-ch-ch-changes for the mobile web

It's been brought to my attention by a few parties that my blog was unviewable on some smartphones; which smartphones I don't know (but I suspect Android [1] based devices). I finally got around to it [2] and the changes were minimal. This:

>

```

<meta name="HandHeldFriendly" content="True">

```

(the Google Mobile-Friendly Test [3] fell on the floor laughing when it encountered that line) changed to:

>

```

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

```

And that's it for the HTML (HyperText Markup Language) changes. The CSS (Cascading Style Sheets) changes weren't that bad, once I figured out what was needed. I asked a fellow cow-orker, D, what I needed to do in order to serve up a “mobile-friendly CSS file” and his advice was: “Do whatever CNN (Cable Network News: Scaring the crap out of people 24/7 since 1990!) [4] does.”

Sigh.

It appears there is no real reliable way to detect a smartphone through CSS only. Sure, I could try to detect a smartphone by sniffing the user agent [5], but I wanted something easy, not something error prone despite a ton of ongoing configuration and testing. So that was out. And the obvious media query [6]:

>

```

<link media="handheld" rel="stylesheet" href="/CSS/smartphone.css" type="text/css">

```

was right out because “smartphones” are “smart” and not at all a “handheld.” Sheesh.

I ended up doing what CNN did—base the style upon the width of the browser. It seems that a “safe” width for smartphones is around 736 pixels [7]. Larger than that, and I can assume a real desktop (or laptop) display; that or less and hey, treat it as a smartphone. And if your browser window on the desktop (or laptop) is less than 737 pixels, you'll get the “mobile” version of my site.

Anyway, the changes weren't all that bad. The “not-main-content” is positioned via CSS and that's all I really wanted to change. For instance, I had this style for the main content: