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 */
body *,
.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.
最后说一下,font-family 的更改有2种好用的方法:
- 可以在 ThemeRoller 中设置
- 可以针对某些特别的地方对 JQM CSS 重写