Taille de la police par rapport à la hauteur de la boîte parent

J'ai des éléments de niveau de bloc dont la propriété height est définie sur %. À l'intérieur de ces éléments de niveau de bloc sont <span> s avec du texte. Exemple:Taille de la police par rapport à la hauteur de la boîte parent

<body style="height: 100%;"> 
    <menu style="height: 10%;"> 
     <button style="display: block; height: 100%;"> 
      <span style="font-size: 4em; line-height: 200%;">text</span> 
     </button> 
    </menu> 
</body>

Cela semble assez bien sur un navigateur mobile, sauf quand je faites pivoter l'appareil (qui est, une fois l'événement body.onorientationchange entre en jeu), le texte devient trop grand. Donc, ma question est, comment puis-je spécifier la taille du texte par rapport à la hauteur de l'élément parent?

Source

2010-10-11 Attila O.

Postez votre mise à jour en tant que réponse et acceptez-la. Si vous avez trouvé une solution vous-même, ** IL EST ** OK d'accepter votre propre réponse :) J'ai oublié la balise 'meta', mais gardez le' -webkit-text-size-adjust: none; 'à l'esprit depuis que j'ai corrigé un problème de taille de texte très étrange sur une boîte de saisie avec ça :) – Marko

Cela désactive le changement de taille de la police sur la rotation, ce qui permet de résoudre à peu près mon problème. Emprunté from here.

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

MISE À JOUR: changé de points-virgules virgules comme Mark suggéré.

Source

2010-10-11 10:56:03

Salut @Attila - accepte ceci s'il vous plaît :) – Marko

On ne peut que sa propre réponse après deux jours, vous vous souvenez? Un fow plus d'heures à parcourir ... –

Si vous utilisez des points-virgules entre les arguments de contenu, vous obtiendrez une erreur sur Safari. Cela fonctionne très bien si vous remplacez les points-virgules par des virgules. – Mark

J'ai rencontré des problèmes similaires sur l'iPhone et ce n'était pas la hauteur causant le problème, mais plutôt une option de webkit mobile.

choisissez la valeur

body { 
    -webkit-text-size-adjust: none; 
}

Source

2010-10-11 10:39:59 Marko

Nice! Mais selon [ce lien] (http://css-infos.net/property/-webkit-text-size-adjust) ne s'applique qu'à Mobile Safari sur iOS. Y a-t-il une alternative pour le navigateur Android par défaut? –

Taille de la police par rapport à la hauteur de la boîte parent

Répondre

Questions connexes