Skip to content

Instantly share code, notes, and snippets.

View astrovm's full-sized avatar

astro astrovm

View GitHub Profile
@dtipson
dtipson / responsive-request-desktop-site.js
Last active February 17, 2024 20:49
How to make responsive sites better respect the "Request a desktop site" feature on modern mobile browsers.
/*
Enable the "Request Desktop Site" functions on mobile chrome (android and iOS) allow users to see desktop layouts on responsive sites. Note that this is distinct from "opt out of mobile!" buttons built into your site: this is meant to work with the browser's native opt-in/opt-out functionality.
Since these functions work, in part, by simply spoofing the user agent to pretend to be desktop browsers, all we have to do is just remember that the browser once claimed to be android earlier in the same session and then alter the viewport tag in response to its fib.
Here's an example viewport tag <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> that we'd be setting to scaleable-yes,max scale=2. That's just an example of something that works on the site I was building: you should customize the "desktop" viewport content setting to whatever works for your site's needs. If you wanted, you could stick this code in the head just after the primary viewport tag so that the br