title: ipad orientation not triggering CSS change
body: <p>I have a website whereby a page is populated using JavaScript - a field called salary is controlled on desktop or device using the following on page load</p>
  
  <pre><code>if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
              $('.salary-desktop').hide();
              $('.salary-tablet').show();
          }
  </code></pre>
  
  <p>The CSS for the field is as follows:</p>
  
  <pre><code>@media screen and (max-width: 480px) {
      #account-details article table .salary-tablet {
              display: none;
          }
  
  @media screen and (max-width: 768px) {
      #account-details article table .salary-tablet {
          display: table-row;
      }
  
  }
  </code></pre>
  
  <p>If I access the page on an iPad in portrait, the salary displays OK and if I change the orientation to landscape, the salary hides. All correct.</p>
  
  <p>If I access the page on an iPad in landscape, the salary displays and any change of orientation has the salary always displaying.</p>
  
  <p>Is there something wrong with the CSS or is the fact that the $('.salary-tablet').show(); being called on the iPad when in landscape then caching/overriding any style the CSS attempts to apply to it?</p>
  
  <p>Thanks</p>