Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
 <body>
​
    <div class="container-outer">
      <div class="container-middle"> 
        <div class="container-inner"> 
          <div class="content">
​
            <span class="mobile">с мобильного</span>
            <span class="tablet">с планшета</span>
            <span class="desktop">с компа</span>
​
​
​
​
​
        </div>
      </div>
    </div>
​
</body>
</html>
 
  html, body {
        min-height:100%;
        height:100%;
      }
          
            html {
                padding: 30px 10px;
                font-size: 20px;
                line-height: 1.4;
                color: #737373;
                background: #f0f0f0;
                -webkit-text-size-adjust: 100%;
                -ms-text-size-adjust: 100%;
            }
​
            html,
            input {
                font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
            }
​
            body {
                padding: 30px 20px 50px;
                margin: 0 auto;
            }
​
            h1 {
                margin: 10px 0px;
                font-size: 50px;
                text-align: center;
        color:#222;
            }
      
      h4 {
        text-align: center;
        color: #333;
      }
      
            p {
                margin: 1em 0;
            }
​
      .container-outer {
        width: 100%;
        padding: 0;
        display: table;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        margin: 0;
      }
      
      .container-middle {
        padding: 0;
        vertical-align: middle;
        display: table-cell;
        margin: 0;
      }
      
      .container-inner {
        width: 500px;
        margin: 0 auto;
      }
      
      .content {
        text-align: left;
        padding: 10px 35px;
        border: 1px solid #b3b3b3;
        border-radius: 4px;
        box-shadow: 0 1px 10px #a7a7a7, inset 0 1px 0 #fff;
        background-color:#fafafa;
        background-image: -moz-radial-gradient(50% 35%, ellipse cover, #FAF7F7, #fffde8 100%);
        background-image: -webkit-radial-gradient(50% 35%, ellipse cover, #FAF7F7, #fffde8 100%);
        background-image: -o-radial-gradient(50% 35%, ellipse cover, #FAF7F7, #fffde8 100%);
        background-image: -ms-radial-gradient(50% 35%, ellipse cover, #FAF7F7, #fffde8 100%);
        background-image: radial-gradient(50% 35%, ellipse cover, #FAF7F7, #fffde8 100%);
      }
      
      p.footer {
        text-align:center;
        font-size:0.75em;
      }
      
      p.footer a, 
      p.footer a:visited 
      p.footer a:active {
        color:#424242;
        text-decoration:none;
        font-weight:bold;
      }
      
      p.footer a:hover {
        text-decoration:underline;
      }
      .mobile .mobile,
      .tablet .tablet,
      .desktop .desktop,
      .portrait .portrait,
      .landscape .landscape,
      .ios .ios,
      .iphone .iphone,
      .ipad .ipad,
      .ipod .ipod,
      .android .android,
      .blackberry .blackberry,
      .windows .windows,
      .fxos .fxos {
        background: green;
        color: #FFF;
      }
      span {
        display: block;
        padding: 2px 15px;
      }
      h2 {
        margin: 0;
      }
      .content {
        padding: 25px 35px;
      }
      iframe {
        display: block;
        margin: 0 auto;
        margin-bottom: 1em;
        width: 270px !important;
        margin-top: 10px;
      }
 
(function() {
  var previousDevice, _addClass, _doc_element, _find, _handleOrientation, _hasClass, _orientation_event, _removeClass, _supports_orientation, _user_agent;
​
  previousDevice = window.device;
​
  window.device = {};
​
  _doc_element = window.document.documentElement;
​
  _user_agent = window.navigator.userAgent.toLowerCase();
​
  device.ios = function() {
    return device.iphone() || device.ipod() || device.ipad();
  };
​
  device.iphone = function() {
    return _find('iphone');
  };
​
  device.ipod = function() {
    return _find('ipod');
  };
​
  device.ipad = function() {
    return _find('ipad');
  };
​
  device.android = function() {
    return _find('android');
    
  };
​
  device.androidPhone = function() {
    return device.android() && _find('mobile');
  };
​
  device.androidTablet = function() {
    return device.android() && !_find('mobile');
  };
​
  device.blackberry = function() {
    return _find('blackberry') || _find('bb10') || _find('rim');
  };
​
  device.blackberryPhone = function() {
    return device.blackberry() && !_find('tablet');
  };
​
  device.blackberryTablet = function() {
    return device.blackberry() && _find('tablet');
  };
​
  device.windows = function() {
    return _find('windows');
  };
​
  device.windowsPhone = function() {
    return device.windows() && _find('phone');
  };
​
  device.windowsTablet = function() {
    return device.windows() && (_find('touch') && !device.windowsPhone());
  };
​
  device.fxos = function() {
    return (_find('(mobile;') || _find('(tablet;')) && _find('; rv:');
  };
​
  device.fxosPhone = function() {
    return device.fxos() && _find('mobile');
  };
​
  device.fxosTablet = function() {
    return device.fxos() && _find('tablet');
  };
​
  device.meego = function() {
    return _find('meego');
  };
​
  device.cordova = function() {
    return window.cordova && location.protocol === 'file:';
  };
​
  device.nodeWebkit = function() {
    return typeof window.process === 'object';
  };
​
  device.mobile = function() {
    return device.androidPhone() || device.iphone() || device.ipod() || device.windowsPhone() || device.blackberryPhone() || device.fxosPhone() || device.meego();
  };
​
  device.tablet = function() {
    return device.ipad() || device.androidTablet() || device.blackberryTablet() || device.windowsTablet() || device.fxosTablet();
  };
​
  device.desktop = function() {
    return !device.tablet() && !device.mobile();
  };
​
  device.portrait = function() {
    return (window.innerHeight / window.innerWidth) > 1;
  };
​
  device.landscape = function() {
    return (window.innerHeight / window.innerWidth) < 1;
  };
​
  device.noConflict = function() {
    window.device = previousDevice;
    return this;
  };
​
  _find = function(needle) {
    return _user_agent.indexOf(needle) !== -1;
  };
​
  _hasClass = function(class_name) {
    var regex;
    regex = new RegExp(class_name, 'i');
    return _doc_element.className.match(regex);
  };
​
  _addClass = function(class_name) {
    if (!_hasClass(class_name)) {
      return _doc_element.className += " " + class_name;
    }
  };
​
  _removeClass = function(class_name) {
    if (_hasClass(class_name)) {
      return _doc_element.className = _doc_element.className.replace(class_name, "" );
    }
  };
​
  if (device.ios()) {
    if (device.ipad()) {
      _addClass("ios ipad tablet");
    } else if (device.iphone()) {
      _addClass("ios iphone mobile");
    } else if (device.ipod()) {
      _addClass("ios ipod mobile");
    }
  } else if (device.android()) {
    if (device.androidTablet()) {
      _addClass("android tablet");
    } else {
      _addClass("android mobile");
    }
  } else if (device.blackberry()) {
    if (device.blackberryTablet()) {
      _addClass("blackberry tablet");
    } else {
      _addClass("blackberry mobile");
    }
  } else if (device.windows()) {
    if (device.windowsTablet()) {
      _addClass("windows tablet");
    } else if (device.windowsPhone()) {
      _addClass("windows mobile");
    } else {
      _addClass("desktop");
    }
  } else if (device.fxos()) {
    if (device.fxosTablet()) {
      _addClass("fxos tablet");
    } else {
      _addClass("fxos mobile");
    }
  } else if (device.meego()) {
    _addClass("meego mobile");
  } else if (device.nodeWebkit()) {
    _addClass("node-webkit");
  } else {
    _addClass("desktop");
    
  }
​
  if (device.cordova()) {
    _addClass("cordova");
  }
​
  _handleOrientation = function() {
    if (device.landscape()) {
      _removeClass("portrait");
      return _addClass("landscape");
    } else {
      _removeClass("landscape");
      return _addClass("portrait");
    }
  };
​
  _supports_orientation = "onorientationchange" in window;
​
  _orientation_event = _supports_orientation ? "orientationchange" : "resize";
​
  if (window.addEventListener) {
    window.addEventListener(_orientation_event, _handleOrientation, false);
  } else if (window.attachEvent) {
    window.attachEvent(_orientation_event, _handleOrientation);
  } else {
    window[_orientation_event] = _handleOrientation;
  }
​
  _handleOrientation();
​
}).call(this);
​
Output

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

Dismiss x
public
Bin info
anonymouspro
0viewers