jquery mobile default font size

Question

I have the following code:

Answer 1

Since version 1.3 of jquery-mobile still lacks a feature to auto-scale text on higher resolutions, I'd like to share my personal workaround here. It is still a hack, but works quite well for me.

This is an override for jquery.mobile-1.3.0.css that makes all text within any ui components scale relatively to the font-size of the page body. Put this anywhere in your CSS and load it after the jQm CSS.

/* 16px > 1em */
.ui-bar,
.ui-loader-verbose h1,
.ui-bar h1, .ui-bar h2, .ui-bar h3, .ui-bar h4, .ui-bar h5, .ui-bar h6,
.ui-header .ui-title, 
.ui-footer .ui-title,
.ui-btn-inner,
.ui-fullsize .ui-btn-inner,
.ui-fullsize .ui-btn-inner,
label.ui-submit,
.ui-collapsible-heading,
.ui-controlgroup-label,
.ui-controlgroup .ui-checkbox label, .ui-controlgroup .ui-radio label,
.ui-popup .ui-title,
label.ui-select,
label.ui-input-text,
textarea.ui-input-text,
.ui-li-heading,
label.ui-slider,
.ui-slider-switch .ui-slider-label {
    font-size: 1em;
}

/* 14px > 0.875em */
.ui-li-divider,
input.ui-mini, .ui-mini input, textarea.ui-mini,
input.ui-input-text.ui-slider-input,
.ui-slider-switch.ui-mini .ui-slider-label {
    font-size: 0.875em;
}

/* 12px > 0.75em */
.ui-mini .ui-btn-inner,
.ui-li-desc {
    font-size: 0.75em;
}

/* 11px > 0.65em */
.ui-li-has-count .ui-li-count {
    font-size: 0.65em;
}

If you then set the font-size of the page body within a media-query, all ui elements will automatically adapt to the bodies' font-size.

@media only screen and (min-device-width: 640px) {

    /* increase font size on higher resolution */
    body {
        font-size: 26px;
    }

    /* increase icon size on higher resolution */
    /* TODO .. */
}

I also recommend overriding the icons within the same query because the 36px versions will look way too small on higher resolution devices.