[mobile] Empêcher zoom sur une div
Répondre à la discussion
Affichage des résultats 1 à 8 sur 8

[mobile] Empêcher zoom sur une div



  1. #1
    Airtux

    Question [mobile] Empêcher zoom sur une div


    ------

    Salut,

    Je suis entrain de crée un site et j'aimerai l'adapté un peu pour les téléphones mobile, j'ai donc crée un bouton menu en position fixe en haut à droit de l'écran, le seul problème c'est que le bouton grossie avec la page quand on zoom, je suis pas sur que ce soit possible mais j'aimerai faire en sorte que ce bouton ne grossie pas quand on zoom.

    j'ai vue qu'il était possible de désactiver totalement le zoom sur la page mais sa ne me conviens pas, j'ai besoin que seul le bouton ne zoom pas.

    Merci

    -----

  2. #2
    cherbe

    Re : [mobile] Empêcher zoom sur une div

    Citation Envoyé par Airtux Voir le message
    Salut,
    Je suis entrain de crée un site et j'aimerai l'adapté un peu pour les téléphones mobile, j'ai donc crée un bouton menu en position fixe en haut à droit de l'écran, le seul problème c'est que le bouton grossie avec la page quand on zoom, je suis pas sur que ce soit possible mais j'aimerai faire en sorte que ce bouton ne grossie pas quand on zoom.
    j'ai vue qu'il était possible de désactiver totalement le zoom sur la page mais sa ne me conviens pas, j'ai besoin que seul le bouton ne zoom pas.
    Merci
    Bonjour
    Tel que tu poses le problème, je ne crois pas que ce soit possible, alors prend le problème à l'envers.
    Tu stocke le niveau de zoom au chargement de la page dans un <Input type ="hidden" value="0">
    Tu détecte le changement de zoom de la page à l'aide de la balise <body>:
    Code:
    <body onresize="la_fonction_JS_qui_zoom_arriere()">
    quand la page est zooumée, la fonction JS calcule le pourcentage de variation entre le nouveau zoom et l'ancien stocké dans l'input.
    Ensuite la fonction "zoom arrière" ton élément de la valeur de la variation et stocke la nouvelle valeur dans l'input pour la prochaine fois.

  3. #3
    Airtux

    Re : [mobile] Empêcher zoom sur une div

    Merci, mais bon après avoir chercher et tenté quelques bidouilles je n'y arrive pas... je suis mauvais en Javascript et apparemment le code que j'ai besoin est pas dans mes cordes...
    Je pense que je vais laisser mon bouton menu tranquille.

  4. #4
    Pauldair

    Re : [mobile] Empêcher zoom sur une div

    Bonjour,

    Je pense qu'il ne faut pas attaquer ce problème en Javascript, mais définir ceci dans la CSS.

    Un bouton avec une propriété No Zoom, je vais te chercher ça.

  5. A voir en vidéo sur Futura
  6. #5
    cherbe

    Re : [mobile] Empêcher zoom sur une div

    Citation Envoyé par Pauldair Voir le message
    Bonjour,
    Je pense qu'il ne faut pas attaquer ce problème en Javascript, mais définir ceci dans la CSS.
    Un bouton avec une propriété No Zoom, je vais te chercher ça.
    Bien vu Pauldair. exemple non testé :
    Code:
    <div style="max-width: 100px;min-width: 100px;min-height: 100px;max-height: 100px;">
    Ceci étant, je pense que c'est une mauvaise idée. Le rendu écran sur mobiles est très variable, beaucoup plus que sur ordinateurs, l'objet risque d'être inexploitable dans certains cas.

  7. #6
    Airtux

    Re : [mobile] Empêcher zoom sur une div

    @Pauldair Merci bien je veux bien la solution que tu me propose mais... contrairement au javascript je connais bien le CSS et je pense que avec uniquement du CSS c'est pas possible, d'ailleurs sauf erreur il n'y a pas de fonction No zoom en CSS, peut-être un mélange de javascript et de CSS.

    @cherbe Merci mais avant même d'avoir tester le code je me doutais qu'il ne fonctionnerait pas... en effet la taille du bouton de change pas donc le width et le height ne change pas c'est juste le zoom qui fait grossir le bouton.

  8. #7
    laentheorist

    Re : [mobile] Empêcher zoom sur une div

    Je ne suis pas fort en programmation Web, mais pourquoi ne pas utiliseruune iframe qui te permet d'avoir une page dans une page. Mon idée (après je peux me tromper) est la suivante :iframe non zoom able. Après faut voir si la taille de liframe change ou pas si tu zoom sur le site
    En espérant avoir été utile

  9. #8
    Pauldair

    Re : [mobile] Empêcher zoom sur une div

    L'idée de Cherbe est sans doute la bonne, mais au lieu de px il faut utiliser des %. Il faut choisir le pourcentage en fonction de la taille désirée de ta div par rapport à l'écran. Teste par exemple:

    Code:
    <div style="max-width: 5%; min-width: 5%; min-height: 5%; max-height: 5%;">

Discussions similaires

  1. Réponses: 12
    Dernier message: 18/10/2014, 14h40