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 重写
相关推荐
jquery.mobile-1.4.5 jquery.mobile-1.4.5 jquery.mobile-1.4.5
最新jquery.mobile-1.4.0 jquery.mobile-1.4.0.zip 含Demos 最新jquery.mobile-1.4.0-UI(jQuery+CSS+images+demos.index.html) jquery.mobile-1.4.0.min.js jquery.mobile-1.4.0.js jquery.mobile-1.4.0.min....
jquery.mobile-1.4.5.min.js A Touch-Optimized Web Framework jQuery Mobile is a HTML5-based user interface system designed to make responsive web sites and apps that are accessible on all smartphone, ...
jquery-ui-日期框扩展成时间框 jquery-ui时间框 基于别人的代码进行修改 jquery-ui-1.8.16.custom.css文件末尾加入以下代码 .ui-timepicker-div .ui-widget-header{ margin-bottom: 8px; } .ui-timepicker-div dl{ ...
jquery mobile 1.4.5.js
包含jquery.mobile-1.0.1.min.js和jquery.mobile-1.0.1.min.css
jquery插件jquery-ui-1.8.18.custom.min.js
代码如下: var fontSize = $(this).attr(‘style’,function(i,s){ return s.replace(/font-size:\s*(\d+.{0,1}\d*)/, function(a){ return a + ‘px’; }); }); //console.debug(“font-size: “+ $(this).attr(...
jquery.mobile-1.4.2移动开发使用包
jquery-ui-1.8.2.custom.min.js,jquery-ui-1.8.4.custom.css
jquery.mobile-1.3.2.js
jquery-uijquery-uijquery-uijquery-uijquery-uijquery-uijquery-uijquery-uijquery-uijquery-uijquery-uijquery-uijquery-uijquery-uijquery-uijquery-ui
jquery-font-size-event.js是一款jquery设置字体大小插件。通过该jquery插件,你可以动态修改网页中指定区域的字体大小。
jquery插件jquery-ui-1.8.2.custom.min.js
这里包含jquery-ui-1.8.16.custom.min.js/jquery-ui-1.8.16.custom.css,我费了好长时间找到的,此东西可以配合jQuery UI开发指南一书使用。
<script src="./public/js/jquery-ui-1.10.3.min.js"> <script src="./public/js/jquery.datepicker-zh-CN.js"></script> <link href="./public/css/jqueryui/jquery-ui-1.10.3.min.css" rel="stylesheet"> $( "#...
jquery-ui-1.8.16jquery-ui-1.8.16jquery-ui-1.8.16jquery-ui-1.8.16jquery-ui-1.8.16jquery-ui-1.8.16jquery-ui-1.8.16jquery-ui-1.8.16jquery-ui-1.8.16jquery-ui-1.8.16jquery-ui-1.8.16jquery-ui-1.8.16jquery-...
压缩包内包含jquery-1.6.4.js jquery-1.6.4.min.js jquery-1.6.4-vsdoc.js 。 【推荐用法】 1、将jquery-1.6.4-vsdoc.js与jquery-1.6.4.js放在同一目录,然后在vs中添加对jquery-1.6.4.js的引用即可; 2、切记:...
移动开发所需要的css文件 jQuery Mobile 1.4.5 | Git HEADhash: 68e55e7 <> 2014-10-31T17:33:30Z | (c) 2010, 2014 jQuery Foundation, Inc. | jquery.org/license */