title: What is the best method of re-rendering a web page on orientation change?
body: <p>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).</p>
  
  <p>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.</p>
  
  <pre><code>var supportsOrientationChange = "onorientationchange" in window,
      orientationEvent = supportsOrientationChange ? "orientationchange" : "resize";
  
  window.addEventListener(orientationEvent, function() {
      window.location.reload()
  }, false);   
  </code></pre>
  
  <p>Edit:</p>
  
  <p>The two main issues when testing on an iphone are:</p>
  
  <p>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.</p>