Размер шрифта jquery mobile по умолчанию - PullRequest
Новая
       0

Размер шрифта jquery mobile по умолчанию

8 голосов
/ 19 июля 2011

У меня есть следующий код: 

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

Но мой размер шрифта выглядит таким маленьким. Это правда, я могу увеличить, но разве размер шрифта по умолчанию не должен быть четким?

Ответы [ 5 ]

12 голосов
/ 20 июля 2011

Я бы посмотрел на настройку точки обзора в метатеге: 

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

Дополнительная информация:

3 голосов
/ 04 марта 2013

Поскольку в версии 1.3 jquery-mobile по-прежнему отсутствует функция автоматического масштабирования текста при более высоком разрешении, я хотел бы поделиться своим личным решением этой проблемы. Это все еще хак, но у меня работает довольно хорошо.

Это переопределение для jquery.mobile-1.3.0.css, которое заставляет весь текст в любых компонентах пользовательского интерфейса масштабироваться относительно размера шрифта тела страницы. Поместите это где-нибудь в свой CSS и загрузите его после CSS jQm. 

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

Если затем установить размер шрифта тела страницы в медиа-запросе, все элементы пользовательского интерфейса автоматически адаптируются к размеру шрифта тела. 

@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 будут выглядеть слишком маленькими на устройствах с более высоким разрешением.

2 голосов
/ 27 апреля 2012

Насколько я могу судить, 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 применяет свои собственные размеры шрифта на основе пикселей к ряду элементов, так что вы получаете несогласованные размеры текста.

1 голос
/ 21 августа 2011

Да, вам нужен этот метатег ПЛЮС, исправление для ошибки изменения размера ориентации в iOS Safari:

Нажмите, чтобы посетить страницу Github

0 голосов
/ 31 декабря 2013

У меня была такая же проблема, пока я не использовал медиа-запросы с плотностью пикселей. Следующее отлично сработало для меня, что позволило тексту размером 20 пикселей на рабочем столе отображать тот же размер, что и мои глаза на мобильном телефоне: 

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