web-dev-qa-db-fra.com

Zoomer sur un élément spécifique du contenu Web (HTML, CSS, JavaScript)

Je souhaite zoomer uniquement sur un élément spécifique de mon site Web (une certaine div), si un utilisateur effectue un zoom sur le site Web sur un appareil mobile. L'image suivante montre mon idée:

enter image description here

Comme vous pouvez le voir, le test est zoomé mais la div supérieure reste la même taille; seul le div qui contient le test est zoomé/mis à l'échelle.

Quelqu'un pourrait-il me donner quelques conseils pour y parvenir? Je ne sais vraiment pas par où commencer.

MISE À JOUR: http://jsfiddle.net/WyqSf/ . si je zoomais sur cette page, cela mettrait à l'échelle les deux éléments. Je souhaite ajuster uniquement l'élément de contenu lors du zoom. Une façon de penser à cela est de récupérer l'entrée utilisateur et d'utiliser javascript pour ajuster la largeur de la div, mais cela est contradictoire avec le comportement habituel.

Pseudo-code:

container.mousemove {
   content.changeWidth();..
}
javascriptcssresponsive-designtouchzoom
23
Bram

Pour ce faire, vous devez corriger la fenêtre d'affichage de l'utilisateur afin qu'il ne puisse pas pincer le zoom sur la page, puis utiliser une bibliothèque d'événements tactiles comme Hammer.js pour attacher un rappel au geste de pincement du zoom qui redimensionne correctement l'élément sur la page que vous souhaitez mettre à l'échelle.

la correction des fenêtres se produit dans l'élément head de votre html:

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

vous utiliseriez hammer.js pour détecter un geste de "pincement zoom", et la bibliothèque vous donne un objet event.gesture très détaillé que vous pouvez utiliser pour détecter la vitesse/le zoom de l'utilisateur.

Le changement de distance entre les 2 points de contact pendant le pincement est représenté par event.gesture.scale ( voir la documentation du martea ), si l'échelle augmente, augmentez le texte en conséquence ... si elle diminue, diminuez le texte -Taille. Utilisez les mathématiques:

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

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

16
1nfiniti

Vous pouvez utiliser le plugin Zoomooz . Dans la documentation, consultez la section Zoom à l'intérieur d'un conteneur - voici ce dont vous pourriez avoir besoin:

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

Vérifiez le JS Fiddle

0
Arun Bertil