title: How to handle the different resolution (Retina & HDs) in mobile device?
body: <p>I'm having different CSS files for different layout (Phone &amp; Tablet). Since I have added styling in tablet view based on the view I get on my <strong>Samsung Note 8 with resolution 1200x800</strong>.</p>
  <p>But when I run this application on <strong>Samsung Galaxy tab750 with resolution 1920x1080</strong>, I get smaller layout with smaller fonts since I have adjusted the fonts and layout based on Note 8.</p>
  <p>So I get the suggestion to add the another CSS file for handling this. Next, when our QA tried running the application on iPad (<strong>Retina Display 2048x1536</strong>), again the third CSS is even small in it.</p>
  <p>In 2012, there was a single tablet with a 2,560x1,600 resolution. In 2013, there were at least six. I suspect we'll see even more in 2014 (<a href="http://ces.cnet.com/8301-35302_1-57615742/tablets-at-ces-2014-the-calm-before-the-storm/#ixzz2nhc1BlAw" rel="nofollow noreferrer">http://ces.cnet.com/8301-35302_1-57615742/tablets-at-ces-2014-the-calm-before-the-storm/#ixzz2nhc1BlAw</a>).</p>
  <p>With respect of this post <a href="https://stackoverflow.com/questions/16069856/responsive-web-design-and-high-resolution-displays-iphone-4-5">Responsive Web Design and high resolution displays (iPhone 4/5)</a>,</p>
  <p>We would be using media queries for required resolutions,</p>
  <pre><code>/* Large desktop */
  @media (min-width: 1200px) {
      font-size: 18px;
  }
  
  /* Portrait tablet to landscape and desktop */
  @media (min-width: 768px) and (max-width: 979px) {
      font-size: 16px;
  }
  
  /* Landscape phone to portrait tablet */
  @media (max-width: 767px) {
      font-size: 14px;
  }
  
  /* Landscape phones and down */
  @media (max-width: 480px) {
      font-size: 12px;
  }
  </code></pre>
  <p>So my concern is can we handle this scenario, without going on adding more and more CSS and media queries, if so please suggests.</p>