What is the best method of re-rendering a web page on orientation change?

30
votes

I have a fluid CSS layout which is rendering badly on an iphone when I change the orientation. (It looks fine when it is refreshed).

I am using the code below to refresh the page on orientation change, which works fine - it just feels a little wrong doing so. Is there any way of achieving this without having to reload the entire page? It is a mobile site, I don't really want to force the user to load the page twice.

var supportsOrientationChange = "onorientationchange" in window,
    orientationEvent = supportsOrientationChange ? "orientationchange" : "resize";

window.addEventListener(orientationEvent, function() {
    window.location.reload()
}, false);

Edit:

The two main issues when testing on an iphone are:

I have a which is 100% width, with a right aligned background image. When I change the orientation from portrait to landscape the body width remains as how it rendered on portrait mode and vice versa. It is more of an issue from landscape to portrait as the page is too wide and it seems to render the images twice.

8
javascriptiphonemobileorientation
Are you using CSS media queries already? – Pointy
@Pointy nope, no media queries. The page layout is the same wether it is horizontal or vertical (the same CSS). I have updated my answer to explain a bit better. – theorise
Are you making your page for iphone only? What about ipad, android, WM7 etc.? If having a different width/size browser causes your page to display poorly you need to look at the layout. – Ryan Ternier
@Ryan Ternier yes, all mobiles. The layout displays fine if the page is refreshed after the orientation has changed, so it isn't a layout issue, the issue lies when the phone renders the page after an orientation transition. – theorise
@theorise got an example page so i can test what you described? – RaphaelDDL

8 Answers

28
votes

Assuming your CSS is already happily rendering on your various size mobile device screens, you need to define the viewport in the <head> of your template.

Example, this sets the page width to be the device's screen width and an initial zoom of 100%. Initial zoom is applied at page load, but not when the orientation is changed.

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

By adding a maximum-scale=1.0 parameter to the viewport you will force the iPad/iPhone to maintain the zoom level and re-layout the page on orientation change. The disadvantage of this is that it will disable zooming. However, the advantage is that you can make layout adjustments with media queries to present the content in a suitable fashion for the current orientation. You can read more about viewport here: Choosing a ViewPort

Now onto media queries. You should put media queries at the bottom of your CSS file and in the order of smallest width to largest width for screen widths. For example, taken from the Html5BoilerPlate CSS example:

@media only screen and (min-width: 480px) {
  /* Style adjustments for viewports 480px and over go here */

}

@media only screen and (min-width: 768px) {
  /* Style adjustments for viewports 768px and over go here */

}

So all your normal styles are above this and applied first, then if the screen is 480px or wider the next block of styles are applied, then if the screen is 768px or wider the last block of styles are applied.

By combining the fixed zoom level to 1.0 and the media-queries, you can make your site responsively resize to the screen size and orientation without javascript. Obviously you need to make sure the site is then well designed so users don't need zooming. If your site is optimized for mobile this shouldn't be a problem.

Please note: other non-safari mobile browsers may re-layout the page without setting the maximum-scale on the viewport. But this behavior is inconsistent and most developers seem to cater to apple devices even if the implementation is worse than other devices. Some other devices would maintain the zoom level and recenter the viewport when the orientation changes. But all devices are ok to fix the zoom level to 1.0.

14
votes

2015 update

All the other answers are incorrect or outdated. Here's what works:

  window.addEventListener('orientationchange', function () {
    var originalBodyStyle = getComputedStyle(document.body).getPropertyValue('display');
    document.body.style.display='none';
    setTimeout(function () {
      document.body.style.display = originalBodyStyle;
    }, 10);
  });

The code listens to the orientationchange event and forces a re-flow of the body element by hiding it and showing it 10 milliseconds later. It does not depend on any <meta> tags or media queries.

Other answers suggested using media queries, but you already use them, since you said "It looks fine when it is refreshed".

Some other answers suggest using location.reload(). This is very inefficient, because it will reload the entire page, including images etc. Especially on mobile, you don't want to do that.

Yet other answers suggested adding <meta name="viewport" content="width=device-width, initial-scale=1.0"> or variations thereof. As of Safari 7, this no longer works. Here's a demo. To make sure you see how it doesn't work, start with the iPad in landscape mode, load the page, then rotate. Notice the page doesn't expand to full height, despite using flexbox all the way.

Compare that to this page, where we use the hide/show body technique in production.

3
votes

Used a method that causes a repaint and a reflow in a single javascript stack frame. Not keen on viewport specific answers as it is often a requirement for accessibility to keep pinch zooming etc.

$(window).on('orientationchange', function() {
    document.body.style.display='none';
    document.body.offsetHeight; //cause a reflow
    document.body.style.display='block'; //cause a repaint
});

Or non-jquery equivalent 

window.addEventListener('orientationchange', function () {
    document.body.style.display='none';
    document.body.offsetHeight; //cause a reflow
    document.body.style.display='block'; //cause a repaint
});
0
votes

In my experience the best way is to have it like this

<meta name = "viewport" content = "user-scalable=no, initial-scale=1.0, maximum-scale=1.0, width=device-width /">
<meta name="apple-mobile-web-app-capable" content="yes"/>

Doing it like @BenSwayne in my experience does not rescale back to the initial scale when you change the orientation. Dont know why that is

0
votes

I had a similar problem and this is how I fixed it with jQuery.

In my case the styles were not changing correctly for my <nav> element. I used a modified version of kidkaos77's code combined with $.get() to only load a certain part of the page:

$(window).bind("resize",function() {
    //on resize reload only nav & replace
    $.get("index.php" +  ' nav', function(data) {
        $("nav").replaceWith($(data).find("nav"));
    });
});

With this method you don't have to reload the entire page, but you would have to specify exactly which elements are being affected by the orientation change, which in your case it seems like you just need one div.

-1
votes

Another option could be to add & remove CSS classes from your html elements (div, var, span, etc). This way you can modify only the elements that are giving you troubles and also you can adjust the content on non-mobile browsers if the user resize the browser window.

Here is the Javascript/JQuery code you will need:

// Code to run when page has finished loading
$(function() {
    // Add CSS-class to body depending on device platform using user agent string
    // You can add more validations here and/or separate Android from iPhone or add more customized classes like "landscape_iPad", "landscape_iPhone", etc.
   // You can also validate browser types and add classes like "background_IE" or "background_Chrome", etc
    if ((navigator.userAgent.indexOf("iPad") != -1)) {
        $("#background").addClass("landscape");
    } else if ((navigator.userAgent.indexOf("Android") != -1) || (navigator.userAgent.indexOf("iPhone") != -1) || 
    (navigator.userAgent.indexOf("iPhone") != -1)) {
        $("body").addClass("iPhone");
    }

    // Get the initial orientation on iOS devices
    if (!isNaN(window.orientation)) {
        var orientation = ($(window).width() < 980) ? "portrait" : "landscape";
        // Index php
        $("#background").addClass(orientation);
    } else {
        // Choose layout depending on viewport/window width
        var orientation = ($(window).width() < 980) ? "portrait" : "landscape";
        // Index php
        $("#background").addClass(orientation);
    }

    // Bind orientationChange (or viewport/window size changes)
    if (window.onorientationchange != undefined) {
        window.onorientationchange = function() {
            var orientation = ($(window).width() < 980) ? "portrait" : "landscape";
            // Index php
            $("#background").removeClass("portrait landscape").addClass(orientation);
        }
    } else {
        // Use landscape styling if it's wider than 980 pixels. 
        // This is for non mobile browsers, this way if the user resize the browser window, content will adjust too.
        $(window).bind('resize', function(){
            var orientation = ($(window).width() < 980) ? "portrait" : "landscape";
            // Index php
            $("#background").removeClass("portrait landscape").addClass(orientation);
        });
    }
});

And here is the CSS class for the sample element "background":

#background.portrait {
    position:absolute;
    top:0px;
    left:0px;
    width:768px;
    height:946px;
    z-index:0;
    background:url(background.png) top center no-repeat;
}
#background.landscape {
    position:absolute;
    top:10px;
    left:20px;
    width:1024px;
    height:724px;
    z-index:0;
    background:url(background_landscape.png) top center no-repeat;
}

This way you can customize the landscape and portrait behavior and you can add more clases like: "landscape_iPhone", "portrait_Android" or whatever you need to control the rendering of the page for each specific device.

Also, you don't need to reload the page, it will adjust it on the fly.

Hope it helps you or someone else =), this has enabled me to create web sites customized for each screen size, mobile brand or even browser type with the same HTML but different CSS classes.

-1
votes

Try something like this:

$(function(){

    changeOrientation(window.orientation == 0 ? "portrait" : "landscape");

    $('body').bind('orientationchange',function(event){
        changeOrientation(event.orientation)
    });

    function changeOrientation(ori){
        $("#orientation").removeClass('portrait landscape');
        $("#orientation").addClass(ori);
    }     
});
-2
votes
$(window).bind('resize', function() { location.reload(); });

This code worked for me.