JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://eightmedia.github.com/hammer.js/hammer.js"></script>
<div id="logtext">Log:</div>
<div id="log"></div>
<div id="footertext">Image:</div>
<div class="footer">
    <a href="http://example.com/">
		<img id="ad" style="cursor: pointer;" src="http://img0.www.suckmypic.net/img/G/G/ffjFYo1j/jsFiddle1.png" title="Example">
	</a>
</div>

CSS

#log{
    position : fixed;
    top : 10px;
    background-color : #888;
    -webkit-border-radius : 20px;
    -moz-border-radius : 20px;
    border-radius : 20px;
    color : #fff;
    opacity : 0.8;
    margin : 15px;
    height : 100px;
    width : 90%;
    overflow : auto;
    padding : 20px;
}
div#logtext {
   position:fixed;
   top:0;
   font-size:20px;
   font-weight:bold;
   text-align: center;
   left:50%;
   margin-left:-20px;
}
div#footertext {
   position:fixed;
   bottom:90px;
   font-size:20px;
   font-weight:bold;
   text-align: center;
   left:50%;
   margin-left:-29px;
}
div.footer {
    position:fixed;
    bottom:0;
    left:50%;
    margin-left:-364px;
    height:90px;
    z-index:501;
}

JavaScript

var p = $('<p />');

function log(msg) {
    $('#log').append(p.clone().html(msg)).scrollTop($("#log").get(0).scrollHeight);
}

function jqUpdateSize() {
    var pziW = "test"; // Declare here the innerWidth of the pinch to zoom
    var wiW = $(window).innerWidth();
    if (wiW < 760 || pziW < 760) {
        $("img#ad").attr("src", "http://img0.www.suckmypic.net/img/H/y/cdsi5AqK/jsFiddle2.png");
        $(".footer").css("height", "60px");
        $(".footer").css("margin-left", "-234px");
    }
    if (wiW < 500 || pziW < 500) {
        $("img#ad").attr("src", "http://img0.www.suckmypic.net/img/1/L/mmy4jT8s/jsFiddle3.png");
        $(".footer").css("height", "60px");
        $(".footer").css("margin-left", "-117px");
    }
    if (wiW > 760 || pziW < 500) {
        $("img#ad").attr("src", "http://img0.www.suckmypic.net/img/G/G/ffjFYo1j/jsFiddle1.png");
        $(".footer").css("height", "90px");
        $(".footer").css("margin-left", "-364px");
    }
};

var hammer = new Hammer(document.getElementById("log"));

hammer.ontransformstart = function(ev) {
    var pziW = "test"; // Declare here the innerWidth of the pinch to zoom
    jqUpdateSize();
    var msg = "Tranform started with a innerWidth of " + pziW;
    log(msg);
};
hammer.ontransform = function(ev) {
    var pziW = "test"; // Declare here the innerWidth of the pinch to zoom
    jqUpdateSize();
    var msg = "Tranform in progress with a innerWidth of " + pziW;
    log(msg);
};
hammer.ontransformend = function(ev) {
    var pziW = "test"; // Declare here the innerWidth of the pinch to zoom
    jqUpdateSize();
    var msg = "Tranform ended with a innerWidth of " + pziW;
    log(msg);
};

$(document).ready(function () {
    jqUpdateSize();
});

$(window).resize(function (a) {
    jqUpdateSize();
    var wiW = $(window).innerWidth();
    var msg = "Resizing window innerWidth to " + wiW;
    log(msg);
});