title: Responsive CSS desktop vs mobile
body: <p>I am fairly new to programming, learning a lot since the beginning with stack overflow. Thank you all. </p>
  
  <p>I am developing a page and I was planning to be optimized all the the way down to tablet. But it can't look broken in the cell phone nowadays... people will probably look in the cell before they reach a desk top pc.</p>
  
  <p>Using this line at the head, makes my site sweet as far as the tablet is concerned:</p>
  
  <pre><code>&lt;meta name="viewport" content="width=device-width, initial-scale=1.0&gt;
  </code></pre>
  
  <p>But then, the cell phone, that was sort of OK, becomes a monster. </p>
  
  <p>For the cell, I have this: </p>
  
  <pre><code>@media only screen 
  and (min-device-width : 720px) 
  and (max-device-width : 1280px)
  
  and (-webkit-min-device-pixel-ratio: 2) { /* STYLES GO HERE}
  </code></pre>
  
  <p>It works like a a charm, doesn't interfere with desk top pcs with similar resolutions, all is happy. </p>
  
  <p>But the initicial-scale=1 affets the zoom in the cell phone. </p>
  
  <p>any suggestion? Page is sodabrasil.com</p>
  
  <p>Thank you all as always. </p>
  
  <p><strong>UPDATE</strong></p>
  
  <p>Actually, the the pixel-rate:2 is not the problem, after thinking well, and removing the code, it still looks bad in the cell. This line:</p>
  
  <pre><code>&lt;meta name="viewport" content="width=device-width, initial-scale=1.0&gt;
  </code></pre>
  
  <p>works really well in the tablet, doesn't make anything in the PC (as it supposed to be), but does not allow any nice scale in the cell. </p>
  
  <p><strong>UPDATE 2</strong>  This seems to be the answer. thank you. Now it's nice in the cell and the css media for cell is working well as well.  </p>
  
  <p>when I use this</p>
  
  <pre><code>&lt;meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes, target-densitydpi=high-dpi"&gt;
  </code></pre>
  
  <p>the cell starts to zoom down to the right proportion. </p>