You are here: Home / Freebies For Websites / Demos & Snippets

Opting Out of Responsive Design (letting users view fixed width desktop layouts on mobile)

On screens less than 1024px wide, you can toggle the fluid/ mobile layout off and on again. A cookie saves layout choice for 30 days.

Works in modern browsers and IE9+ (media query support).

The PHP and download pack are below this demo.

Switch to Fluid Mobile Layout

Content Box 1

I do not like green eggs and ham.

Content Box 2

Roses are red ...

Content Box 3

... Violets are blue.

Content Box 4

It was Colonel Mustard, in the hall with the rope.


PHP Code

Here is the logic for setting up the PHP opt-out switch;

<?php // setup the cookie
$layouts = array('rwd', 'fixed'); // default layout 1st ('rwd')
foreach ($layouts as $choice) {
    if (isset($_GET['layout']) && $_GET['layout'] == $choice) { // set cookie for chosen layout
        $_SESSION['layout'] = $_GET['layout'];  
        setcookie('layout', $_GET['layout'], time()+60*60*24*30); // how long for cookie (60*60*24*30 = 30 days)
        }
    }
$savedlayout = isset($_COOKIE['layout']) ? $_COOKIE['layout'] : $layouts[0]; // use cookie layout else use default
$layout = $_SESSION['layout'] ? $_SESSION['layout'] : $savedlayout; // use session layout else use cookie layout
?>

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">

<?php if ($layout == 'fixed') { // for devices that recognise viewport meta tag
    echo '<meta name="viewport" content="width=1024" />'; // force desktop 1024px fixed layout
    } else {
    echo '<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1" />';
    }
?>

<title>Page Title</title>

<?php if ($layout == 'fixed') { // optional - for devices that don't recognise viewport meta tag
    echo '<link rel="stylesheet" href="opt-out-styles.css" />'; // fixed layout
    } else {
    echo '<link rel="stylesheet" href="rwd-styles.css" />'; // responsive layout
    }
?>
<!-- if you don't use the stylesheet switch above, remember to link your stylesheet as normal -->
<!-- <link rel="stylesheet" href="rwd-styles.css" /> -->

</head>
<body>

<div class="page-content">

<h1>Page Heading</h1>

<?php if ($layout == 'fixed') {
    echo '<p class="switch"><a href="?layout=rwd">Switch to Fluid Mobile Layout</a></p>'; // switch to default/rwd layout
    } else {
    echo '<p class="switch"><a href="?layout=fixed">Switch to Fixed Desktop Layout</a></p>'; // switch to optout/fixed layout
    }
?>

<div class="box-wrap">
    <div class="box box1">
        <h3>Content Box 1</h3>
        <p>I do not like green eggs and ham.</p>
    </div>
    <div class="box box2">
        <h3>Content Box 2</h3>
        <p>Roses are red ...</p>
    </div>
    <div class="box box3">
        <h3>Content Box 3</h3>
        <p>... Violets are blue.</p>
    </div>
    <div class="box box4">
        <h3>Content Box 4</h3>
        <p>It was Colonel Mustard, in the hall with the rope.</p>
    </div>
</div>

</div><!-- closing ".page-content" -->

</body>
</html>

Download

More demos and snippets

Did you find this useful? There are more demos and code snippets this way.