Zoom élément spécifique sur le contenu web (HTML, CSS, JavaScript)

Je veux zoom seulement un élément spécifique de mon site (un certain div), si un utilisateur effectue un zoom avant sur site sur un appareil mobile. L'image suivante montre mon idée:

Zoom élément spécifique sur le contenu web (HTML, CSS, JavaScript)

Comme vous pouvez le voir, le test est agrandie, mais le haut de la div reste la même taille; seule la div qui contient de test est un zoom /mise à l'échelle.

Quelqu'un pourrait-il me donner quelques conseils sur la façon de réaliser cet objectif? Je ne sais vraiment pas par où commencer.

Mise à JOUR: http://jsfiddle.net/WyqSf/. si je zoom sur cette page, elle sera mise à l'échelle des deux éléments. Je veux régler seulement le contenu de l'élément lors d'un zoom. D'une façon que je peux penser à y parvenir c'est de récupérer l'entrée utilisateur et l'utilisation de javascript pour régler la div de largeur, mais cela est contradictoire avec le comportement habituel.

Pseudo-code:

container.mousemove {
   content.changeWidth();..
}

source d'informationauteur Bram

  1. 12

    Pour ce faire, vous aurez besoin de fixer un utilisateur de la fenêtre d'affichage, de sorte qu'ils ne peuvent pas pincée de zoom de la page, puis utiliser une touche bibliothèque des événements comme Hammer.js pour joindre un rappel pour le zoom par pincement geste que de façon appropriée redimensionne l'élément sur la page que vous souhaitez à l'échelle.

    fenêtre d'affichage de fixation qui se passe dans la tête de l'élément de votre code html:

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

    vous utilisez hammer.js pour détecter une pincée de zoom" geste, et la bibliothèque vous donne une très détaillé de l'événement.geste objet que vous pouvez utiliser pour détecter combien/comment rapide de l'utilisateur est le zoom.

    La variation de la distance entre les 2 points de contact tout en pinçant est représenté par l'événement.le geste.échelle (voir le marteau de la documentation), si les augmentations d'échelle, d'augmenter le texte en conséquence ... si elle diminue diminuer le texte de taille. L'Utilisation Des Mathématiques:

    $('body').hammer().on("pinch", function(event) {
    console.log(event.gesture.scale);
    //do math...
});

    J'imagine que vous avez compris l'idée...

  2. 0

    Vous pouvez utiliser le Zoomooz plugin. À l'intérieur de la documentation, consultez le Zoom à l'intérieur d'un conteneur section -- c'est ce que vous pourriez avoir besoin:

    <div class="zoomViewport">
    <div class="zoomContainer">
        <div class="zoomTarget">Target 1</div>
        <div class="zoomTarget">Target 2</div>
    </div>
</div>

    De vérifier la JS Fiddle