Zoom élément spécifique sur le contenu Web (HTML,CSS, JavaScript ))
je veux zoomer uniquement sur un élément spécifique de mon site Web (une certaine div), si un utilisateur zoome sur le site web sur un appareil mobile. L'image suivante montre mon idée:
comme vous pouvez le voir, le test est zoomé mais le div supérieur reste de la même taille; seul le div qui contient le test est zoomé / scalé.
Quelqu'un pourrait-il me donner quelques conseils sur la façon d'y parvenir? Je ne sais vraiment pas par où commencer.
mise à jour: http://jsfiddle.net/WyqSf/. si je zoomais sur cette page, les deux éléments seraient mis à l'échelle. Je veux juste ajuster l'élément contenu lors du zoom. Une façon que je peux penser à réaliser ceci est de récupérer l'utilisateur-entrée et utiliser javascript pour ajuster la largeur du div, mais c'est contradictoire avec le comportement habituel.
Pseudo-code:
container.mousemove {
content.changeWidth();..
}
2 réponses
pour ce faire, vous devez corriger le viewport de l'utilisateur afin qu'il ne puisse pas faire de zoom sur la page, puis utiliser une bibliothèque d'événements tactiles comme Marteau.js pour joindre un rappel à la pinch zoom geste qui redimensionne de façon appropriée l'élément sur la page que vous souhaitez mettre à 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 utiliseriez hammer.js pour détecter un" zoom pincer " geste, et la bibliothèque vous donne un très détaillé de l'événement.objet gestuel que vous pouvez utiliser pour détecter combien/à quelle vitesse l'utilisateur zoome.
le changement de distance entre les 2 points de contact lors du pincement est représenté par événement.geste.échelle (voir le marteau de la documentation), si l'échelle augmente, augmentez le texte en conséquence ... si elle diminue, diminuez la taille du texte. Utiliser Les Maths:
$('body').hammer().on("pinch", function(event) {
console.log(event.gesture.scale);
// do math...
});
j'imagine que vous avez l'idée...
Vous pouvez utiliser le Zoomooz plugin. Dans la documentation, vérifiez le Zoom à l'intérieur d'un conteneur -- 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>