jquery mobile默认字体大小答案

【问题标题】：jquery mobile default font sizejquery mobile默认字体大小
【发布时间】：2023-03-21 06:52:01
【问题描述】：

我有以下代码：

<!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>

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

【问题讨论】：

标签： jquery-mobile

【解决方案1】：

我会考虑在元标记中设置视点：

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

更多信息：

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

【讨论】：

我是 StackOverflow，蘑菇云铺设的傻瓜。

【解决方案2】：

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

这是对 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 .. */
}

我还建议覆盖同一查询中的图标，因为 36 像素版本在更高分辨率的设备上看起来太小了。

【讨论】：

【解决方案3】：

据我所知，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 将它自己的基于像素的字体大小应用到许多元素上，这样就会得到不一致的文本大小。

【讨论】：

【解决方案4】：

是的，您需要该元标记以及针对 iOS Safari 中方向调整大小错误的修复：

Click to visit Github Page

【讨论】：

【解决方案5】：

在我使用像素密度的媒体查询之前，我也遇到了同样的问题。以下对我来说非常有用，它允许桌面上 20 像素的文本在移动设备上显示为相同大小：

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

【讨论】：