title: jQuery .height sets to 1724 on iPhone
body: <p>i have the following problem: when I use jQuery's <code>.height()</code> to set the height of my web page, it sets it to 1742px on an iPhone 5s when in portrait mode. When in landscape mode on a iPad, it is too short!</p>
  
  <h2>CSS</h2>
  
  <pre><code>html
  {
      height:0;
  }
  input, button
  {
      -webkit-appearance: none;
      -moz-appearance: none;
  }
  p, a, h1, h2, h3, h4, h5, h6
  {
      font-family:sans-serif;
  }
  
  #title
  {
      position:relative;
      color:#fafafa;
      margin:0;
      text-align:center;
      top: 7px;
      width:100%;
      height:32px;
      font-weight:800;
  }
  .container
  {
      margin: 0;
      background-color: #eee;
  }
  .header
  {
      width:100%;
      height: 50px;
      background-color: #000;
  }
  .body-container
  {
      width:100%;
      height:auto;
      background-color: #eee;
  }
  .sideBarIcon
  {
      color:#d3d3d3;
      font-weight:lighter;
      position:relative;
  }
  .nav-container
  {
      width:100%;
      height:32px;
  }
  #sidebb
  {
      float:right;
      background-color:#000;
      border:0; 
      margin:0;
      height:30px;
      width:30px;
      text-align:center;
      padding:0;
  }
  #sidemenu
  {
      float:right;
      height:100%;
      width:15%;
  }
  .sidebar
  {
      width:100%;
      height:100%;
  }
  #sideBarApear
  {
      width:30px;
      height:30px;
      margin:0;
      float:right;
      background:#000;
  }
  ul, li
  {
      display:none;
      list-style:none;
      margin:0;
      padding:0;
  }
  </code></pre>
  
  <p>js/jQuery</p>
  
  <pre><code>var sideBarOpen = false;
  var swidth = $(window).width();
  var sheight = $(window).height();
  $("html").animate({height: (sheight)});
  
  $(document).ready(function(){
      $("#sidebb").click(function(){
          if (sideBarOpen === false)
          {
              $("#sideBarApear").animate({height: (sheight-50)+"px",width: (swidth/100*15)+"px"});
              sideBarOpen = true;
          }else {
              $("#sideBarApear").animate({height:'30px',width:'30px'});
              sideBarOpen = false;
          }
      });
  });
  </code></pre>
  
  <h2>HTML</h2>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html&gt;
  
      &lt;head&gt;
          &lt;title&gt;insert title&lt;/title&gt;
          &lt;link rel="stylesheet" type="text/css" href="/font-awesome/css/font-awesome.min.css"&gt;
          &lt;link rel="stylesheet" type="text/css" href="Mobile.css"&gt;
          &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"&gt;&lt;/script&gt;
          &lt;script src="MobileJs.js"&gt;&lt;/script&gt;
          &lt;meta name="viewport" content="width=device-width, initial-scale=1" /&gt; 
      &lt;/head&gt;
  
      &lt;body class="container"&gt;
  
          &lt;div class="header"&gt;
              &lt;div class="nav-container"&gt;
                  &lt;h1 id="title"&gt;Click the button&lt;/h1&gt;
  
              &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;div class="body-container"&gt;
              &lt;div id="sidemenu"&gt;
                  &lt;div class="sideBar"&gt;
                      &lt;div id="sideBarApear"&gt;
                          &lt;button id="sidebb"&gt;
                              &lt;i class="fa fa-list fa-lg sideBarIcon"&gt;&lt;/i&gt;
                          &lt;/button&gt;
                          &lt;ul&gt;
                              &lt;li&gt;12&lt;/li&gt;
                          &lt;/ul&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><a href="http://clickthebutton.esy.es/CTBM" rel="nofollow">live example</a></p>
  
  <p>I just can't seem to figure this out...</p>
  
  <p>...help would be much apreciated!</p>
  
  <p>Thanks</p>