jquery mobile default font size

Question

I have the following code:

Answer 1

I had the same issue as well until I used media queries with pixel density. The following worked great for me, which allowed text that was 20px on desktop to display as the same size to my eyes on mobile:

 @media screen and (-webkit-device-pixel-ratio: 2.0) {iPhone 5s, iPad Retina, etc.
        body {font-size: 48px;}
    }

Answer 2

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.

Answer 3

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.

Answer 4

I would look into setting the viewpoint in a meta tag:

<meta name="viewport" content="width=device-width, initial-scale=1">

Some more info:

• http://davidbcalhoun.com/2010/viewport-metatag

Answer 5

Yes you need that meta tag PLUS a fix for the orientation resize bug in iOS Safari:

Click to visit Github Page