title: Creating consistent dimensions betwen Android Browser and Desktop?
body: <p>I have a web page which works very well on a regular computer, and handles resizing down very well / you can re-size the window to any size you like, and the app is still useful. You can also zoom in with <kbd>Ctrl</kbd><kbd>+</kbd> if you like, and the app's layout will automatically change to accommodate.</p>
  
  <p>Now let's talk about the smartphone. I use<br>
  <code>&lt;meta name="viewport" content="width=device-width"/&gt;</code></p>
  
  <p>Unfortunately, my Android phone has about double the dpi of a regular computer. The simple solution is for me to zoom in, but then I have to scroll all the time.</p>
  
  <p>I could put everything in a <code>position:fixed;width:100%</code> <code>div</code>, but that creates a rather choppy experience, because scrolling is still accessible.</p>
  
  <p>That brings me to the last solution which is for me to write my own scaling code to increase the size of relevant content for smartphone users. So, how should I do this? One way is to check the user-agent, and use that to change my CSS. There are two reasons I don't like that, 1. It is sniffing the user-agent and 2. It is assuming ~200dpi, while that will actually very between phones.</p>
  
  <p>If there was a way to detect the dpi, I would much prefer that route. Can I do this? Do you have a better idea?</p>