title: CSS Media query not working correctly
body: <p>In an  application am using media query to make page mobile friendly and responsive.
  Doc type Used</p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  </code></pre>
  
  <p>Included meta tags in header</p>
  
  <pre><code>&lt;meta name="HandheldFriendly" content="true" /&gt;
          &lt;meta name="viewport" content="width=device-width;user-scalable=no" /&gt;
  </code></pre>
  
  <p>Included CSS</p>
  
  <pre><code>&lt;link rel="stylesheet" type="text/css"  href="MBE-MOBILE.css" th:href="@{'MBE-MOBILE.css.css'}"/&gt;
  </code></pre>
  
  <p>Media Queries Used</p>
  
  <pre><code>@media screen  and (min-width:300px)  { 
      .heading-text{
          font-size: 20px;
          color:red;
      }
  }
  
  @media screen  and (min-width:480px) { 
      .heading-text{
          font-size: 30px;
          color:green;
      }
  }
  
  @media screen  and (min-width:640px) { 
      .heading-text{
          font-size: 35px;
          color:blue;
      }
  }
  </code></pre>
  
  <p>In web browser this is working fine.But in some mobile browsers the media query is not working correctly.</p>
  
  <p>EG: for Sony Experia which has a resolution 1080 x 1920 pixels  the browser taking min-width 320 instead of 640 px. </p>
  
  <p>Can any body guide me the exact usage  of media query for solving this.Any Help will be appreciated.</p>