title: Mobile site resize on orientation change not working in Safari
body: <p>I'm new to mobile site development, so bear with me. Currently my site (<a href="http://farhillsanimalclinic.com/mobile" rel="nofollow">http://farhillsanimalclinic.com/mobile</a>) seems to be behaving in Android, but I'm having a problem in Safari. When I change from portrait to landscape orientation, everything resizes properly, but when switching from landscape to portrait, the elements are not being resized. I know that the resize function is getting called, because I temporarily added an alert to it, but it just seems not to be working properly. As I mentioned, it works well on an Android phone.</p>
  
  <p>Here's the relevent code:</p>
  
  <pre><code>function getWidth() {
      xWidth = null;
      if(window.screen != null)
          xWidth = window.screen.availWidth;
      if(window.outerWidth != null)
          xWidth = window.outerWidth;
      return xWidth;
  }
  
  function getHeight() {
      xHeight = null;
      if(window.screen != null)
          xHeight = window.screen.availHeight;
      if(window.innerHeight != null)
          xHeight =   window.innerHeight;
      return xHeight;
  }
  
  function resizeWrapper() {
      xWidth = getWidth();
      xHeight = getHeight();
      $("#wrapper").css("width", xWidth + "px");
      $("#wrapper").css("min-height", xHeight + "px");
  }
  
  $(window).bind('orientationchange', resizeWrapper);
  $(window).bind('resize', resizeWrapper);
  </code></pre>
  
  <p>If it matters, I'm using the following to define the viewport:</p>
  
  <pre><code>&lt;meta name="viewport" content="target-densitydpi=device-dpi, initial-scale=1.0, minimum-scale=1.0, maximum-scale=2.0, user-scalable=1" /&gt;
  </code></pre>