Menu
I'm working on a mobile version of my site. I'm using media queries and CSS as much as possible, but I'm also using some javascript to, for example, turn my navigation into a collapse/expand list on smaller devices to save room.
To handle all of this, I was attempting to use the window.resize event. This allows the magic to happen on desktop browsers while they're resized, but I'm getting resize events on iPad/iPhone when I'm not expecting them.
On desktop browsers, I only get a resize event if I actually resize the window. On mobile browsers I get the resize event when I change orientation (expected), but I also get it when I toggle to expand/collapse something.
Here's a simple example:
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <title>Resize test</title> <style> .box {height: 10000px; background: green; display: none;} </style> <script> $(function(){ $(".opener").click(function(){ $(".box").slideToggle(); }); $(window).resize(function(){ alert("resized"); }); }); </script> </head> <body> <a href="#" class="opener">Open/close me</a> <div class="box"></div> </body> </html> When you click the link on a desktop browser, no alert. Click the link on iPhone/iPad, you get the alert. What's the deal?
482
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 }) }) If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
