Detecting screen orientation changes in iPhones and iPads

I’ve been working on a freelance web development job for a customer in Bath, and one of the requirements was for the site to be specifically tested on iOS devices such as iPhones and iPads. The site used a lot of JavaScript effects, absolutely positioned elements and jQuery plugins, and during testing we noticed that when changing the screen orientation on an iPhone, some glitches were appearing. So what to do?

Fortunately Apple have included a number of iOS specific events that web developers can tap into. The onorientationchange event is thrown when the iPhone is rotated from portrait to landscape, so you can listen for this event and add code to fix the problem…

window.onorientationchange = function(){
   // Do clever stuff to fix problems caused by rotating 
};