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 Fixed Desktop 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
- Download the Opt-Out RWD sample pack (.zip) - 1996 Downloads
More demos and snippets
Did you find this useful? There are more demos and code snippets this way.