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;
}
I found out the answer in StackOverflow itself link of the solution. it's the answer by sidonaldson
that helped me solve an issue faced earlier like this. ty
the answer is:
var cachedWidth = $(window).width();
$(window).resize(function(){
var newWidth = $(window).width();
if(newWidth !== cachedWidth){
//DO RESIZE HERE
cachedWidth = newWidth;
}
});
Is the assumption wrong, that you only want to have the effect of the resize event on a non-touch device? If so you could just use Modernizr and do a check like:
$(window).resize(function(e){
if(Modernizr.touch) {
e.preventDefault();
}
});