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 Ctrl+ if you like, and the app's layout will automatically change to accommodate.
Now let's talk about the smartphone. I use
<meta name="viewport" content="width=device-width"/>
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.
I could put everything in a position:fixed;width:100% div, but that creates a rather choppy experience, because scrolling is still accessible.
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.
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?
