I have found an extremely unwanted dirty hack for the time being, but the CSS is unacceptably ugly (buttons are oddly shaped, and there seem to be gaps between elements).
This piece of HTML will load extra CSS if the device has a device-pixel-ratio of 1.5 (this is the case on hdpi devices) AND a device-width of 360px. (540/1.5 = 360px, due to the device pixel ratio).
qHD.css contains the following:
<linkrel="stylesheet" media="screen and (-webkit-device-pixel-ratio: 1.5) and (min-device-width: 360px) and (max-device-width: 360px)"href="css/qHD.css"/><!-- Dirty hack for Android qHD devices -->
The 133% is 360/1.5 = 240 and then 320 (the desired width) / 240 which is 1.333333333333.
font-size: 133% !important;
Does anyone have any advice on how to make the buttons prettier? I'd rather have my device return a device-pixel-ratio of 1.6875 (or 1.7)... is this possible? My last few posts resulted in no comments whatsoever, I'd appreciate people giving me some input, even if it means calling me stupid or disapproval of my ideas, it's always better than nothing! (: