I’m about to take on the task of making my existing website mobile-friendly. I have read that using a Responsive Design is generally considered the best way to do this, using CSS media queries to change the look of the page based on the width of the screen viewing the page. However, I think a lot of the information I have found regarding this was written back when smart-phones had resolutions of 600px wide or so. My Galaxy S5 is 1920x1080, so a website attempting to set layout based on the width (in pixels) of the screen is likely to think my Galaxy S5 is a desktop monitor. Indeed, a lot of websites do display on my phone with the desktop version, and it really sucks because the text is always microscopic. I can always zoom in, but for designing my own site I feel it’s unacceptable to ask the user to do that, and it also ruins the look of the whole page anyway. In general, I hate the way text is so tiny on a smart-phone screen (and I’m near-sighted and viewing small things up close is easy for me, I can’t imagine how much worse this is for people who are far-sighted).
What I really want is to get the width of the device (in inches), and then scale the text proportionally to the screen so that the text is always the same size (in inches) regardless of the device. I have read that, while there is currently no way to get the screen size of the device in inches with a media query, you can get the resolution using “dppx”, and that’s enough to know what size to set text to in order to have it appear consistent across devices.
But I’m really confused as to how dppx works. I have read that it means “dots per pixel” but a pixel is a dot, isn’t it? Okay, ignoring that, I have seen that it says there is a ratio of 96dpi:1dppx, so I think I would be looking at the following values:
For a typical monitor that is about 18 inches wide and has a pixel-width of 1920, it would therefore have a dpi of 106.7, which would be 1.1dppx.
For my Galaxy S5, the factory specs say 432dpi, which would be 4.5dppx, right? That means the S5 has a resolution of about 4.1 times that of the desktop monitor.
So in my CSS, I could have it check the dppx, and if it is at least 2dppx, I could set the font-size to 181% (1.1/2). If it is at least 3dppx, I could set the font-size to 273% (3/1.1). If it is at least 4dppx, I could set the font-size to 364%. The goal, as mentioned before, is that text is always the same size (in inches) regardless of device. I could probably instead use Javascript to get the dppx and dynamically write the CSS to get an exact scale, I think. I’m assuming PHP can’t do it, being server-side. It looks like I should be able to have some Javascript code in my document header like:
var percent_dppx=res.dppx()/1.1;
//and then something to set text by class or ID have font-size = percent_dppx*100%
//or else have the Javascript write CSS into the HTML specifying the font-sizeMostly this is all stuff I am brainstorming as I type. It would help a lot if anyone can confirm I am on the right track.