Preview page on devices of different size

Show page at full-size monitior, table pc and mobile phone

by Pavel Volyntsev

HTML

<div id='view-options'><ul class="devices">
    <li>Device:</li>
    <li class="device device-monitor" data-width="full-width">
        <a href="#" title="PC"><div class="icon icon-monitor"></div></a>
    </li>
    <li class="device device-tablet" data-width="tablet-width">
        <a href="#" title="Tablet Vertical"><div class="icon icon-tablet"></div></a>
    </li>
    <li class="device device-tablet horizontal" data-width="tablet-width horizontal">
        <a href="#" title="Tablet Horizontal"><div class="icon icon-tablet horizontal"></div></a>
    </li>
    <li class="device device device-mobile" data-width="mobile-width">
        <a href="#" title="Smartphone Vertical"><div class="icon icon-mobile"></div></a>
    </li>
    <li class="device device-mobile horizontal" data-width="mobile-width horizontal">
        <a href="#" title="Smartphone Horizontal"><div class="icon icon-mobile horizontal"></div></a>
    </li>
</ul>
</div> <!-- div#view-options -->

<div id="iframe-wrap" class="full-width">
    <iframe id="iframe" src="http://projects.copist.ru/find-pair-pony/" frameborder="0" width="100%" height="354px"></iframe>
    </div>

CSS

body { font-family: "Arial"; font-weight: 300; color: #333; background: #000; }
#view-options { height: 40px; }

.icon {
  width: 17px;
  height: 16px;
  background-repeat: no-repeat;
 ...

JavaScript

$(function(){
    function fixHeight () {
        var headerHeight = $("#switcher").height();
        $("#iframe").attr("height", (($(window).height() - 2) - headerHeight) + 'px');
    }
        	
    $(window).resize(fixHeight).resize();
    
    $(".devices .device").click(function () {
        $('#iframe-wrap').removeClass().addClass($(this).data('width'));    
        $('.devices .icon').removeClass('active');
        $(this).find('.icon').addClass('active');    
        return false;
    });
    
    $('.devices .device').first().click();
});