April 30, 2019

Request Desktop Site

It's been years since I've given my website anything more than a cursory look. After moving on from web development to native apps, my site has been relegated to the most basic of questions:

Is it up? Yes. Ok.

But it's time. Time to support all the hip things: Responsive design, larger fonts, and clean layout.

2 days later, I've learned the necessities of responsive design, implemented bootstrap 4, and increased the line height and font size of my site.

There is one thing, however, that has always bothered me.

The option in every mobile browser, "Request Desktop Site", that so many sites do not support, either to stay true to the religion of forced responsive design, or out of laziness.

Fortunately, it's really easy to support this option, giving all your mobile users the option to ignore the mobile site you've tirelessly exerted yourself over, only to support a subset of the desktop version's features.

Not that I'm being passive aggressive.

At all.

Your responsive site likely has a meta viewport tag like this:

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

You can easily check the request user agent and look for the word "mobile". If it exists, then drop the device-width and use a specific width instead:

<meta name="viewport" content="width=1024">

What's that, you say? Functionality dependent on the user agent is bad form?

Maybe.

And that would be likely true, if you were checking for a specific OS or browser, Most browsers these days include a bunch of things in the user agent string, so it would be pointless anyway.

In fact, did you know that the Android Pie browser specifies that it's AppleWebKit, in addition to "KHTML, Like Gecko.

The one string that is consistent with mobile browsers, however, is the existence of Mobile.

So that's what I'm using.

Because that's what works.

comments powered by Disqus