jquery mobile default font size

Question

I have the following code:

Answer 1

As far as I can tell, jQueryMobile is only so-so in adjusting to the high-density screens coming out with the latest mobile devices. Font size is already pretty small on my iPad 1, so I wonder if there is enough compensation in the CSS for retina displays etc.

I am not certain if it is helping much, but I am using these media queries to set the base font size of my app differently for higher-density screen.

body {
    font-size: 14px;
}

@media screen and (-webkit-device-pixel-ratio: 0.75) {
    body {font-size: 10.5px;}
}
@media screen and (-webkit-device-pixel-ratio: 1.0) {desktop browsers
    body {font-size: 14px;}
}
@media screen and (-webkit-device-pixel-ratio: 1.5) {e.g. Google Nexus S (Samsung Galaxy S)
    body {font-size: 16px;}
}
@media screen and (-webkit-device-pixel-ratio: 2.0) {e.g. iPad
    body {font-size: 18px;}
}

The trouble is, jQuery applies its own pixel-based font sizes to a number of elements, so that you get inconsistent text sizes.