Gérer la taille des polices sur iOS (valeurs absolues ? ou dimensionner une div ?)

Réduire
X
  • Filtrer
  • Heure
  • Afficher
Tout effacer
nouveaux messages

  • [RÉGLÉ] Gérer la taille des polices sur iOS (valeurs absolues ? ou dimensionner une div ?)

    Bonjour,

    Je travaille toujours sur mon footer, et je rame avec la taille des polices.
    Celles-ci ont une fâcheuse tendance à s'adapter à la largeur de l'écran sur lequel elles s'affichent, et ça fait passer certains textes sur deux lignes.
    Non seulement c'est assez incohérent compte tenu de la faible importance des liens que contiennent ces textes, mais surtout ça me pose des problèmes au niveau de la taille du background image, qui se retrouve à être d'une hauteur insuffisante pour tout contenir, ce qui fait apparaître une bande blanche en bas d'écran.
    Je précise que le problème n'est pas visible dans la vue adaptative de la console, mais uniquement sur les terminaux concernés (j'ai fait le test sur iPhone 7 et iPhone 7+ : le problème appraît en mode paysage).

    Bref.

    J'ai donc tâtonné longuement avec des pixels plutôt que des em, pensant bien qu'il s'agissait d'unités en valeur absolue, mais si ça donne d'excellents résultats dans la vue adaptative de la console, sur les iPhone, ça ne règle rien du tout.
    Je me demande donc maintenant si je ne devrais pas prendre le problème par un autre bout : mettre le texte dans une div et lui affecter une largeur ? mais alors dans une media-query pour éviter des problèmes sur grands écrans...

    Quelques images pour illustrer le problème :

    D'abord, voici la capture du résultat obtenu avec mon CSS sur la vue adaptative. C'est nickel, c'est exactement ce que je veux :

    Le texte a la bonne dimension, et reste sur une ligne. NB: Le résultat est tout-à-fait similaire sur iPhone 7 Plus
    Chaque ligne de texte reste sur 1 ligne. La font-size est définie en pixels (avant elle était en em, et je pensais avoir résolu mon problème en passant en pixels... mais non)

    Voici maintenant la réalité, sur iPhone 7 : le texte grossit à proportion de la taille de l'écran, ce qui le fait passer sur deux lignes...

    Cliquez sur l'image pour l'afficher en taille normale  Nom : 1557674966-iphone-7-realite.jpg* Affichages : 21* Taille : 111,1 Ko* ID : 2000542

    Enfin, voici pourquoi ça m'enquiquine de laisser ce texte passer sur deux lignes : l'image du background se retrouve un peu "débordée"

    Cliquez sur l'image pour l'afficher en taille normale  Nom : 1557675143-iphone-7-consequence.jpg* Affichages : 23* Taille : 194,9 Ko* ID : 2000543

    Donc : comment je peux faire pour obliger le texte à rester à la taille que je lui demande ? Visiblement pas avec la font-size...
    J'ai pensé à une div, mais je ne vois pas trop comment faire :
    si je me contente de donner une taille à cette div (disons 380 pixels puisque c'est la dimension occupée par le texte sur une ligne sur grand écran), j'ai un problème avec les petits écrans en mode portrait.
    si je lui donne une taille plus petite, le texte sera illisible sur grand écran...
    etc etc
    Je pourrais peut-être affecter une taille "conditionnelle" gérée par une media query ?

    Comme vous le voyez, je suis un peu perdue, je ne sais pas trop par quel bout prendre ce problème... Un coup de main serait bienvenu
    Dernière édition par FlodAriege à 18/05/2019, 15h05 Raison: Il fallait activer Bootstrap dans Template Creator CK
    Flo, Ariège

    Il n'y a que celui qui a honte d'apprendre qui a peur de demander

  • #2
    Bonjour,
    si ton thème inclut bootstrap, tu peux essayer de positionner tes items et textes dans des divs qui s'adapteront à la largeur de l'écran. Le system "grid" de bootstrap fonctionne plutôt bien en général.
    https://getbootstrap.com/docs/4.0/layout/grid/

    c'est une piste...

    Seb
    FlodAriege likes this.

    Commentaire


    • #3
      Salut,
      la typographie responsive est presque devenue une discipline à part.

      A vrai dire, c'est un peu compliqué de répondre directement sur ta question.
      Je ne peux que te donner des pistes de fondamentaux à apprendre.

      Media queries
      une liste très complète sur les formats:
      Media Queries for Standard Devices | CSS-Tricks
      https://css-tricks.com/snippets/css/...ndard-devices/

      Un exemple de ce qu'il est possible de faire avec les spécificités CSS les plus récentes :

      Responsive Typography with calc()+vw+rem
      https://codepen.io/ghazalp/pen/EzNoWY

      Ma liste CSS en rapport avec les éléments de mon exemple :
      https://github.com/ghazal/Mes-CSS
      (liste que je complèterai)

      PS : ce n'est pas évident de trouver des références en FR.
      FlodAriege likes this.
      Ce forum, vous l'aimez ? il vous a sauvé la vie ? Vous y apprenez chaque jour ? Alors adhérez à l'AFUJ https://www.joomla.fr/association/adherer

      Commentaire


      • #4
        Bonjour,

        Pardon pour ce retour tardif, mais si on n'a pas encore trop eu l'occasion d'échanger sur ce forum, je dois vous dire que pendant la semaine je suis normalement absorbée par mon "vrai" boulot (faire tourner la boite). Ce n'est que le week-end que je m'adonne à mon "hobby" (faire tourner mon site internet, même si, les années passant, ce site étant devenu le pourvoyeur principal de business pour mon "vrai" travail", je devrais peut-être reconsidérer l'appellation que je donne à chacune de mes tâches ). Bref, tout ça pour vous présenter mes excuses de ne pas avoir réagi plus rapidement à vos réponses.

        Ma réponse va maintenant être très courte (et ça n'est pas mon habitude de faire court) : merci !

        J'utilise Template Creator CK.
        Après une lecture rapide du début du 1er lien donné par SebC , j'ai commencé par vérifier si Template Creator CK prenait en charge Bootstrap.
        Réponse : oui, mais il faut l'activer.
        Ici :
        template creator ck / paramètres / page / paramètres du template / charger bootstrap : OUI

        Là. C'est tout.
        Je suis retournée voir si ça ne bouleversait pas trop ma mise en page et.... surprise !! Le problème du footer est réglé

        La preuve par l'image sur iphone 7 :
        Cliquez sur l'image pour l'afficher en taille normale

Nom : 552E1A7C-6736-497F-8177-9EBE6FEF5A52.png 
Affichages : 0 
Taille : 108,9 Ko 
ID : 2000806
        Dernière édition par FlodAriege à 18/05/2019, 15h02
        Flo, Ariège

        Il n'y a que celui qui a honte d'apprendre qui a peur de demander

        Commentaire

        Annonce

        Réduire
        1 sur 2 < >

        C'est [Réglé] et on n'en parle plus ?

        A quoi ça sert ?
        La mention [Réglé] permet aux visiteurs d'identifier rapidement les messages qui ont trouvé une solution.

        Merci donc d'utiliser cette fonctionnalité afin de faciliter la navigation et la recherche d'informations de tous sur le forum.

        Si vous deviez oublier de porter cette mention, nous nous permettrons de le faire à votre place... mais seulement une fois
        Comment ajouter la mention [Réglé] à votre discussion ?
        1 - Aller sur votre discussion et éditer votre premier message :


        2 - Cliquer sur la liste déroulante Préfixe.

        3 - Choisir le préfixe [Réglé].


        4 - Et voilà… votre discussion est désormais identifiée comme réglée.

        2 sur 2 < >

        Assistance au forum - Outil de publication d'infos de votre site

        Compatibilité: PHP 4.1,PHP4, 5, 6DEV MySQL 3.2 - 5.5 MySQLi from 4.1 ( @ >=PHP 4.4.9)

        Support Version de Joomla! : | J!3.0 | J!2.5.xx | J!1.7.xx | J!1.6.xx | J1.5.xx | J!1.0.xx |

        Version française (FR) D'autres versions sont disponibles depuis la version originale de FPA

        UTILISER À VOS PROPRES RISQUES :
        L'exactitude et l'exhaustivité de ce script ainsi que la documentation ne sont pas garanties et aucune responsabilité ne sera acceptée pour tout dommage, questions ou confusion provoquée par l'utilisation de ce script.

        Problèmes connus :
        FPA n'est actuellement pas compatible avec des sites Joomla qui ont eu leur fichier configuration.php déplacé en dehors du répertoire public_html.

        Installation :

        1. Téléchargez l'archive souhaitée : http://afuj.github.io/FPA/

        Archive zip : https://github.com/AFUJ/FPA/zipball/master

        2. Décompressez le fichier de package téléchargé sur votre propre ordinateur (à l'aide de WinZip ou d'un outil de décompression natif).

        3. Lisez le fichier LISEZMOI inclus pour toutes les notes de versions spécifiques.

        4. LIRE le fichier de documentation inclus pour obtenir des instructions d'utilisation détaillées.

        5. Téléchargez le script fpa-fr.php à la racine de votre site Joomla!. C'est l'endroit que vous avez installé Joomla et ce n'est pas la racine principale de votre serveur. Voir les exemples ci-dessous.

        6. Exécutez le script via votre navigateur en tapant: http:// www. votresite .com/ fpa-fr.php
        et remplacer www. votresite .com par votre nom de domaine


        Exemples:
        Joomla! est installé dans votre répertoire web et vous avez installé la version française du fichier FPA:
        Télécharger le script fpa-fr.php dans: /public_html/
        Pour executer le script: http://www..com/fpa-fr.php

        Joomla! est installé dans un sous-répertoire nommé "cms" et vous avez installé la version française du fichier FPA:
        Télécharger le script fpa-fr.php dans: /public_html/cms/
        Pour executer le script: http://www..com/cms/fpa-fr.php

        En raison de la nature très sensible de l'information affichée par le script FPA, il doit être retiré immédiatement du serveur après son utilisation.

        Pour supprimer le script de votre site, utilisez le lien de script de suppression fourni en haut de la page du script. Si le lien de suppression échoue pour supprimer le script, utilisez votre programme FTP pour le supprimer manuellement ou changer le nom une fois que le script a généré les données du site et le message publié sur le forum. Si le script est toujours présent sur le site, il peut être utilisé pour recueillir suffisamment d'informations pour pirater votre site. Le retrait du script empêche des étrangers de l'utiliser pour jeter un oeil à la façon dont votre site est structuré et de détecter les défauts qui peuvent être utilisé à vos dépends.
        Voir plus
        Voir moins

        Partenaire de l'association

        Réduire

        Hébergeur Web PlanetHoster
        Travaille ...
        X