iPad & iPhone Viewport Rotate Screw-up

If you've designed a mobile site before (or if you're about to...) you would have seen or used this before:

<meta name="viewport" content="width=device-width, initial-scale=1">

That's all fine & dandy, until someone rotates their screen and then flips it back again. This is one way to solve that little irritating issue:

You can disable scalability with javascript until gesturestart with this script:

if (navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPad/i)) {
    var viewportmeta = document.querySelector('meta[name="viewport"]');
    if (viewportmeta) {
        viewportmeta.content = 'width=device-width, minimum-scale=1.0, maximum-scale=1.0, initial-scale=1.0';
        document.body.addEventListener('gesturestart', function () {
            viewportmeta.content = 'width=device-width, minimum-scale=0.25, maximum-scale=1.6';
        }, false);
    }
}