iphone/ipad triggering unexpected resize events
Store the window width and check that it has actually changed before proceeding with your $(window).resize
function:
jQuery(document).ready(function($) { // Store the window width var windowWidth = $(window).width(); // Resize Event $(window).resize(function(){ // Check window width has actually changed and it's not just iOS triggering a resize event on scroll if ($(window).width() != windowWidth) { // Update the window width for next time windowWidth = $(window).width(); // Do stuff here } // Otherwise do nothing });});
Here's the vanilla javascript version of the accepted answer
document.addEventListener('DOMContentLoaded', function() { // Store the window width var windowWidth = window.innerWidth // Resize Event window.addEventListener("resize", function() { // Check window width has actually changed and it's not just iOS triggering a resize event on scroll if (window.innerWidth != windowWidth) { // Update the window width for next time windowWidth = window.innerWidth // Do stuff here } // Otherwise do nothing })})
I needed to specify a width:
<meta name="viewport" content="width=1000, initial-scale=1.0, user-scalable=yes">
Styles:
html, body{ height:100%; width:100%; overflow:auto;}