Roland Studer
25. February 2013

How to do responsive opt-out by setting the viewport with JavaScript or Ruby on Rails

A client recently asked us to provide a possiblity to opt-out of the responsive behaviour of his website. While we believe that a well done responsive site does not need an opt-out button, we wanted to see how we could achieve this.

Setting the viewport

Usually we set the viewport to the device-width for a responsive site:

<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport"></meta>

Now if we want the website to be displayed as if the device had a larger width, we just set the width accordingly.

<meta content="width=1024, initial-scale=0, maximum-scale=1.0, minimum-scale=0.25, user-scalable=yes" name="viewport"></meta>

Source: CSS-Tricks

Javascript approach

You can easily change the meta-tags content with javascript by doing something like this:

document.getElementById("viewport").setAttribute("content", "width=1024, initial-scale=0, maximum-scale=1.0, minimum-scale=0.25, user-scalable=yes");

Looks quite simple, but you run into some problems with this approach.

Implementation with Ruby on Rails

Now if we’ll look at a server-side implmentation for an opt-out possibility with Rails:

class ResponsiveController < ApplicationController

  def optOut
    cookies[:responsive] = { :value => "no", :expires => 30.days.from_now }

  def optIn

def mobile_device?
  if session[:mobile_param]
    session[:mobile_param] == "1"
    request.user_agent =~ /Mobile|webOS|Mini|Mobi/
- if cookies[:responsive] == "no"
  meta name="viewport" content="width=1024, initial-scale=0, maximum-scale=1.0, minimum-scale=0.25, user-scalable=yes"
- else
  meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"

Add a toggle button

- if mobile_device?
    - if cookies[:responsive] == "no"
      a href="/responsive/optIn" mobile Version
    - else
      a href="/responsive/optOut" Full version
match 'responsive/:action', :controller => :responsive

Recommendation: If you need responsive opt-out, do it server-side.

Again: We do not recommened offering an opt-out possiblity for a responsive design. But if you really need it, go for the server-side solution, because toggling the responsive behaviour often requires a reload anyway.

If you really want to use Javascript, ReView.js solves some problems you will run into.