Question

Just started a mobile web app using jQuery Mobile. When I rotate the device to landscape-mode and then back to portrait, the view gets stuck in landscape-mode. Do I manually need to refresh the view based on the event or…? I’m currently testing on an iPhone.

/Rasmus

Answer 1

If you have not yet tried different viewport tags, try this one out:

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

The important part as far as your question is concerned is width=device-width.

–> UPDATE <–

Here is a JavaScript example that deals with Mobile Safari not updating the viewport width/height values on orientationchange:

if (navigator.userAgent.match(/iPhone/i)) {
    $(window).bind('orientationchange', function(event) {
        if (window.orientation == 90 || window.orientation == -90 || window.orientation == 270) {
            $('meta[name="viewport"]').attr('content', 'height=device-width,width=device-height,initial-scale=1.0,maximum-scale=1.0');
        } else {
            $('meta[name="viewport"]').attr('content', 'height=device-height,width=device-width,initial-scale=1.0,maximum-scale=1.0');
        }
    }).trigger('orientationchange');
}

The code above checks the navigator.userAgent string to see if the device is an iPhone. It then binds an event handler to the orientationchange event that detects the orientation of the device and updates the viewport tag to use the proper dimensions depending on the orientation. Notice how the height is set to the device-width when the device is in landscape orientation.