Why?

Responsive Design is great. But some people dislike endless scrolling, prefer getting a quick overview and can navigate much faster with pinch & zoom. So why annoy them by forcing them into a responsive website? Just let them switch off responsive design with one click. Like in the old "mobile/desktop website" days. - It's about freedom of choice.

Try it!

Open this website on a mobile device (< 1024 px wide) and click the link in the footer or the big blue button to see the effect. The page's <meta name="viewport" content="width=device-width> is set to 1024 pixels. The responsive design is switched off. The users decision is persisted for the entire session by using a cookie.

Text for linking to desktop version. There is no default text. You can also leave it blank and style the link with the according CSS classes.

data-link-responsive

Text for linking to responsive version. There is no default text. You can also leave it blank and style the link with the according CSS classes.

data-always-visible

Whether link should be displayed all the time ("true") or only if browser window or screen size SMALLER than 1024px ("false"). Defaults to "false". We recommend to use "false" for production websites and "true" only for development purpose.

CSS classes

Depending on the "Responsive on/off" state, the "Responsive Switch" link has some CSS classes for styling.

API

Using the default method of adding a link with the "Responsive Switch" CSS class is simple. But you can also trigger the "Responsive Switch" via custom JavaScript code. Just call responsiveSwitch.toggle() like in the following example. It will toggle between the desktop and the responsive view and also update all "Responsive Switch" links on your website.

<script>
responsiveSwitch.toggle();
</script>

FAQ

How does it work internally?

Once the user clicks the "Responsive Switch" link, the HTML page's viewport-metatag is modified. It is told that the page should be displayed with a 1024px width (of course you can customize this width). This decision is persisted with a session cookie. So when the user navigates to another page on the website, the according page will also be displayed in "Desktop view". Clicking the link a second time will switch the website back to "Responsive Design" mode.

Is the link visible all the time?

No, the "Responsive Switch" link is only visible when it is needed. This means that by default, it is only visible when the screen or window size is less than 1024px.

Can I customize the link text?

Add a text of choice to the "Responsive Switch" link's "data-link-desktop" and "data-link-responsive" attribute and it will be used. You can also leave both attributes empty and style the link using the applied CSS classes.

The responsive design is switched off until the sessions has ended. That means, after clicking a "Responsive Switch" link the user can visit other pages of the website. Those pages are presented in "desktop view", as well. He can switch back to "responsive view" at any point of time. When he closes his browser window or visits another website, his website session cookie is cleared. This means when he visits the website a second time, he will see it in "responsive mode".

Can I customize the width of the "Desktop view"?

Yes. By default, the "Responsive Switch" link is visible on screens and browser windows less than 1024px wide. And it is also using that 1024px for the "Desktop-View" mode. You can easily customize this value by setting a global variable called "responsiveSwitchBreakpoint" to a value of your choice before referencing the JavaScript file in the HTML <head> area. Just like this:

It only works on devices reading the viewport-metatag, which is essential for responsive design. We have tested it with the following operating systems and browsers: iOS (works), Android 4.x (works), FirefoxOS/Android Firefox (not working).

Changelog

0.9.1 (2013-11-15)

Added support for "data-always-visible" attribute.

0.9.0 (2013-11-13)

Initial version.

Donate

In case you want to support this project, please feel free to donate :)