jQuery toggelClass works on desktop but not on iOS
<p>I've written a bit of JavaScript to make some divs with class "recent" hide 4/5 of the image contained inside them. When clicked, these divs get an additional class slapped on them which reveals the whole image. This works fine on the desktop but on iOS it behaves very erratic. I can't quite pin down when it happens but at some point (when I scroll? when the address bar disappears?) the divs just won't respond to touching at all and then sometimes some functionality returns when I rotate the device. Not sure what's happening. Also, and this may be an entirely different question but I think it is related the problem above, if you expand the browser on a desktop the JavaScript doesn't seem to "deactivate" after 768px wide (the recent div's heights are greater or less than the images they contain. They should be the same after the window is 768px wide). Here is the website www.distantfuturejosh.com/playground/Pending%20Axioms and here is the necessary code:</p>

<p>HTML</p>

<pre><code>&lt;div class="recent"&gt;
    &lt;img src="img/comic_2.jpg"&gt;
&lt;/div&gt;
</code></pre>

<p>CSS</p>

<pre><code>.recent {
    width: 98%;
margin: 0% 0% 2% 2%;
float: left;
    position: relative;
    left: 0%;
    box-shadow: 0px 0px 20px -6px;
    overflow: hidden;
}
.recent img {
width: 100%;
}
.resize {
    height: auto !important;
}
</code></pre>

<p>JavaScript</p>

<pre><code>$(document).ready(function(){

    $(window).ready(phoneStyle);
    $(window).resize(phoneStyle);

    function phoneStyle()
    {
        if ($(window).width() &lt;= 767) {

            // make the height of header and recent divs a percentage of window width
            $('div.recent, header').css('height', $(window).width() / 5);

            // make the recent divs show and hide (patially) when clicked
            $('div.recent').click(function() {
                $(this).toggleClass('resize');   // phone.css--&gt; .resize {height: auto !important;}
            });
        } else {
            return;
        }
    }

});
</code></pre>
