jquery mobile taille de police par défaut

J'ai le code suivant:

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

Mais ma taille de la police de l'air si petit.
C'est vrai, je peux faire un zoom, mais ne devrait pas la taille de police par défaut pour être lisible?

OriginalL'auteur Phillip Senn | 2011-07-19

  1. 12

    Je regarde en définissant le point de vue dans une balise meta:

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

    Quelques infos:

    Je suis un StackOverflow, nuage en forme de champignon pose de fou.

    OriginalL'auteur Phill Pafford

  2. 3

    Depuis la version 1.3 de jquery-mobile n'a toujours pas de fonctionnalité d'auto-texte d'échelle sur des résolutions plus élevées, j'aimerais partager ma solution de contournement. Il est encore un hack, mais fonctionne très bien pour moi.

    C'est un remplacement pour jquery.mobile-1.3.0.css qui fait tout le texte à l'intérieur de tout les composants d'interface utilisateur échelle relativement à la taille de police du corps de la page. Le mettre n'importe où dans votre CSS et de le charger après la 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;
}

    Ensuite, si vous définissez la taille de police du corps de la page à l'intérieur d'un media-query, tous les éléments d'interface s'adapte automatiquement aux organismes de " police-taille.

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

    Je recommande également substituant les icônes à l'intérieur de la même requête parce que la 36px versions air trop petite sur la plus haute résolution des appareils.

    OriginalL'auteur Rico Pfaus

  3. 2

    Aussi loin que je peux dire, jQueryMobile est plus uniquement de manière à s'adapter à la haute densité des écrans à venir avec des appareils mobiles les plus récents. Taille de la police est déjà assez petit sur mon iPad 1, donc je me demande si il y a assez de rémunération dans le CSS pour l'affichage rétine etc.

    Je ne suis pas certain si c'est de l'aider, mais je suis à l'aide de ces requêtes de média pour définir la base de la taille de police de mon application différemment pour la plus grande densité de l'écran.

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

    Le problème est, jQuery applique ses propres pixels en fonction des tailles de police pour un certain nombre d'éléments, de sorte que vous obtenez incompatible tailles de texte.

    OriginalL'auteur Wytze

  4. 1

    Oui, vous avez besoin que les méta tag en PLUS d'un correctif pour l'orientation redimensionner bug dans iOS Safari:

    Cliquez ici pour visiter la Page Github

    OriginalL'auteur B-Money

  5. 0

    J'ai eu le même problème jusqu'à ce que j'ai utilisé des requêtes de média avec la densité de pixel. La suite a très bien fonctionné pour moi, ce qui a permis de texte qui a été 20px sur le bureau pour afficher la même taille à mes yeux sur mobile:

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

    OriginalL'auteur jamescampbell