title: CSS3 media queries not working on Safari on iPod/iPhone
body: <p>I am developing a responsive design website. The website will be optimized for iPhone and iPod (Both having width 640px). </p>
  
  <p>I am using the following CSS3 media queries: </p>
  
  <pre><code>    @media screen and (max-width: 640px) {
          .display-none-mobile{
              display: none;
          }
      }
      @media screen and (min-width: 641px) {
          .display-none-desktop{
              display: none;
          }
      }
  </code></pre>
  
  <p>Above code works great on my desktop browsers when i shrink browser width to 640px. However the code does not work when i try to test the website on iPod using Safari browser. </p>
  
  <p>I changed the CSS3 media queries to </p>
  
  <pre><code>    @media screen and (max-device-width: 640px) {
          .display-none-mobile{
              display: none;
          }
      }
      @media screen and (min-device-width: 641px) {
          .display-none-desktop{
              display: none;
          }
      }
  </code></pre>
  
  <p>Now, the responsive design worked for Safari on iPod but it messed up with layouts on all other desktop browsers. Those css3 media queries were totally ignored by oChrome, IE, FF on my desktop (for width 640px).</p>
  
  <p>So by now i have figured out there is something related to cross browser compatibility with css3 media queries, but could not find much info about this. what can be the ways i can update my code to make css3 media queries working for all browsers (or atleast major ones). I am targeting atleast</p>
  
  <ol>
  <li>IE Windows</li>
  <li>Safari Windows </li>
  <li>Chrome Windows </li>
  <li>Firefox Windows </li>
  <li>Safari iPod</li>
  <li>Chrome iPod</li>
  </ol>