Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!doctype html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>My Desktop Site</title>
</head>
<body>
  You are a desktop device.
</body>
</html>
 
var Responsive = {
    maxPhoneWidth: 775,
    maxTabletWidth: 925,
 
    //REDIRECT BASED ON CONFIGURABLE MAX WIDTH THRESHOLD
    maxWidthRedirect: function (maxWidth, url) {
        var viewport = this.getWindowSize();
         
        //ADD EXCLUSION IN HASH IN CASE DESKTOP VIEWING IS INTENDED
        if (window.location.hash != '#desktop' && viewport.width < maxWidth)
            window.location.href = url;
    },
     
    //REDIRECT BASED ON RECOMMENDED PHONE WIDTH THRESHOLD
    mobileRedirect: function (url) {
        this.maxWidthRedirect(this.maxPhoneWidth, url);
    },
     
    //REDIRECT BASED ON RECOMMENDED TABLET WIDTH THRESHOLD
    tabletRedirect: function (url) {
        this.maxWidthRedirect(this.maxTabletWidth, url);
    },
     
    //DETERMINE CROSS-BROWSER SCREEN SIZE
    getWindowSize: function () {
        var w = window,
            d = document,
            e = d.documentElement,
            g = d.getElementsByTagName('body')[0],
            x = w.innerWidth || e.clientWidth || g.clientWidth,
            y = w.innerHeight || e.clientHeight || g.clientHeight;
 
        return { width: x, height: y };
    }
};
//NOTIFY VIEWPORT SIZE
var viewport = Responsive.getWindowSize();
alert('width: ' + viewport.width + ', height: ' + viewport.height);
//REDIRECT USERS TO MOBILE SITE IF LESS THAN 775PX
Responsive.mobileRedirect('http://www.google.com/mobile/');
Output 300px

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
falafelsoftwarepro
0viewers