Question

我有以下代码：

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

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

Answer 1

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

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

更多信息：

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

Answer 2

由于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版本在高分辨率设备上看起来太小了。

Answer 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将自己的基于像素的字体大小应用于多个元素，以便您获得不一致的文本大小。

Answer 4

是的，你需要这个元标记PLUS修复iOS Safari中的方向调整大小错误：

Click to visit Github Page

Answer 5

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

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

jquery移动默认字体大小

5 个答案: