1. 首頁
  2. 問答
  3. jQuery Mobile的默認字體大小

jQuery Mobile的默認字體大小

2011-07-19 105 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

相關問題

 相關問題