1. 首页
  2. 问答
  3. jQuery Mobile的默认字体大小

jQuery Mobile的默认字体大小

2011-07-19 200 views
8

我有以下代码：jQuery Mobile的默认字体大小

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>jQuery Mobile</title> 
<link rel="stylesheet" href="http://code.jquery.com/mobile/latest/jquery.mobile.css" /> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script> 
<script src="http://code.jquery.com/mobile/latest/jquery.mobile.js"></script> 
</head> 
<body> 

<div data-role="page" id="myPage"> 

    <div data-role="header"> 
     <h1>Header</h1> 
    </div> 
    <div data-role="content">Hello World!</div> 
    <div data-role="footer"> 
     <h4>Footer</h4> 
    </div> 

</div> 
<script src="/jQueryMatrix/Inc/js/PRINT.js"></script> 
</body> 
</html>

但是我的字体大小看起来好小。 这是真的，我可以放大，但不应该默认字体大小清晰？

来源

2011-07-19 Phillip Senn

回答

12

我会考虑在meta标签设置的观点：

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

一些更多的信息：

来源

2011-07-19 20:27:02

+3

我是一个StackOverflow，放置傻瓜的蘑菇云。 –

2

据我所知，jQueryMobile只是在调整到最新的移动设备出来的高密度屏幕。字体大小在我的iPad 1上已经很小了，所以我想知道在视网膜显示器的CSS中是否有足够的补偿。

我不确定它是否有帮助，但我正在使用这些媒体查询来设置我的应用程序的基础字体大小对于高密度屏幕而言是不同的。

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;} 
}

麻烦的是，jQuery的应用自己的基于像素的字体大小的一些元素，让你得到不一致的文字大小。

来源

2012-04-27 11:00:22 Wytze

3

由于jquery-mobile的1.3版本仍然缺少自动缩放更高分辨率文本的功能，所以我想在此分享我的个人解决方法。这仍然是一个黑客攻击，但对我来说效果很好。

这是jquery.mobile-1.3.0.css的重写，它使得任何UI组件中的所有文本都相对于页面主体的字体大小进行缩放。把这个放在你的CSS的任何地方，然后在之后加载它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; 
}

如果再设置一个媒体查询中页面正文的字体大小，所有的UI元素会自动适应身体的字体大小。

@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 .. */ 
}

我还建议在同一查询中压倒一切的图标，因为36px版本将眼光放在更高分辨率的设备来说太小了。

来源

2013-03-04 14:37:15

0

我有同样的问题，直到我用像素密度的媒体查询。以下工作对我很有帮助，它允许桌面上的文本显示为与我手机上的尺寸相同的尺寸：

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

来源

2013-12-31 19:42:50 jamescampbell

相关问题

 相关问题