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.
<head>of your responsive website's HTML code.
<a href="#" class="rs-link" data-link-desktop="Switch to desktop version" data-link-responsive="Switch to responsive / mobile version"></a>
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.
data-link-desktop="Switch to desktop version"
data-link-responsive="Switch to responsive / mobile version"
You can control the link behaviour with the following attributes:
|data-link-desktop||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.|
Depending on the "Responsive on/off" state, the "Responsive Switch" link has some CSS classes for styling.
|rs-link-to-desktop||Website is in "Responsive Design" mode (default)|
|rs-link-to-responsive||Website is in "Desktop" mode|
|rs-link-active||"Responsive Switch" link IS visible (browser window or screen size SMALLER than 1024px)|
|rs-link-inactive||"Responsive Switch" link NOT visible (browser window or screen size LARGER than 1024px)|
var responsiveSwitchBreakpoint = 1024;
|0.9.1 (2013-11-15)||Added support for "data-always-visible" attribute.|
|0.9.0 (2013-11-13)||Initial version.|