You got the small screen document.
Your screen looks bigger though... clear cookies and refresh?

Server Side Mustard Cutting

For simplicities sake, our mustard-cut here will be a measuring of the screen width. But it could test for anything client-side. We're also using PHP here because easy, but it could be any server side language.

GitHub Repo

The Problem


I'm not saying this is the best possible solution. I am saying this seems reasonable to me and I'm using it in production.

This kind of thing has been approached before. These things aren't necessarily mutually exclusive.

The Plan

Possible Scenarios

The Code

Server side:


  // This is just a FAKE ROUTER
  // Do this however your site does routing

  if (isset($_COOKIE["screen-width"])) {

    // Large screen
    if ($_COOKIE["screen-width"] > 700) {


    // Small screen
    } else {



  // Choose a default
  } else {




In the document that gets served, if the cookie isn't already present, run the mustard cutting script:

  // Run this script as high up the page as you can,
  // but only if the cookie isn't already present.
  if (!isset($_COOKIE["screen-width"])) { ?>
    <script src="mobile-mustard.js"></script>
<?php } ?>

The script is:

(function() {

  // If the browser supports cookies and they are enabled
  if (navigator.cookieEnabled) {

    // Set the cookie for 3 days
    var date = new Date();
    date.setTime(date.getTime() + (3 * 24 * 60 * 60 * 1000));
    var expires = "; expires=" + date.toGMTString();

    // This is where we're setting the mustard cutting information.
    // In this case we're just setting screen width, but it could
    // be anything. Think
    document.cookie = "screen-width=" + screen.width + expires + "; path=/";

      Only refresh if the WRONG template loads.

      Since we're defaulting to a small screen,
      and we know if this script is running the
      cookie wasn't present on this page load,
      we should refresh if the screen is wider
      than 700.

      This needs to be kept in sync with the server
      side distinction
    if (screen.width > 700) {

      // Halt the browser from loading/doing anything else.

      // Reload the page, because the cookie will now be
      // set and the server can use it.