Zoom spezifisches Element auf Webinhalt (HTML, CSS, JavaScript)

Ich möchte nur ein bestimmtes Element meiner Website (ein bestimmtes div) zoomen, wenn ein Benutzer die Website auf einem mobilen Gerät zoomt. Das folgende Bild zeigt meine Idee:Zoom spezifisches Element auf Webinhalt (HTML, CSS, JavaScript)

enter image description here

Wie Sie sehen können, wird der Test vergrößert aber die Spitze div bleibt die gleiche Größe; Nur das div, das test enthält, wird gezoomt/skaliert.

Könnte mir jemand ein paar Tipps geben, wie ich das erreichen kann? Ich weiß wirklich nicht, wo ich anfangen soll.

UPDATE: http://jsfiddle.net/WyqSf/. Wenn ich auf diese Seite zoome, würde es beide Elemente skalieren. Ich möchte nur das Inhaltselement beim Zoomen anpassen. Eine Möglichkeit, dies zu erreichen, besteht darin, die Benutzereingabe abzurufen und Javascript zu verwenden, um die Breite der div anzupassen, aber dies widerspricht dem üblichen Verhalten.

Pseudo-Code:

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

Quelle

2013-07-22 Bram

einige von Ihnen Code oder eine Geige einfügen. Ohne Code können wir nicht viel helfen. Verwenden Sie CSS. – AnaMaria

für Anfänger haben auf diese http://stackoverflow.com/questions/4049342/how-can-i-zoom-a-div-in-firefox-and-opera –

@sunny. Er möchte nicht auf die gesamte Website zoomen. er sucht nur den Textteil zu vergrößern ... – AnaMaria

Um dies zu tun, müssten Sie die Benutzer-Ansichtsfenster zu fixieren, so dass sie nicht die heran Not kann Seite und verwenden Sie dann eine Berührungsereignisbibliothek wie Hammer.js, um einen Rückruf an die Pinch-Zoomgeste anzuhängen, die die Größe des Elements auf der Seite, die Sie skalieren möchten, entsprechend ändert.

Ansichtsfenster Befestigungs geschieht im Kopf Elemente Ihrer html:

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

würden Sie hammer.js verwenden, um eine „Prise Zoom“ Geste zu erkennen, und die Bibliothek bietet Ihnen ein sehr detailliertes event.gesture Objekt, das Sie können feststellen, um wie viel/wie schnell der Benutzer zoomt.

Die Abstandsänderung zwischen den 2 Berührungspunkten beim Zusammendrücken wird durch event.gesture.scale (see hammer documentation) dargestellt. Wenn der Maßstab zunimmt, erhöhen Sie den Text entsprechend ... Wenn er kleiner wird, verringern Sie die Textgröße. Verwenden Sie Math:

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

ich denke, Sie bekommen die Idee ...

Quelle

2013-07-29 22:47:48 1nfiniti

Danke für die Antwort. Ich werde mir die vorgeschlagene Bibliothek ansehen. Ich gebe dir die 50 Punkte, weil deine Antwort mir ziemlich gut erscheint. – Bram

Beachten Sie, dass das Ereignisobjekt mit der neuen HammerJS-Version (mindestens 2.0.4) verschiedene Mitglieder hat und das Mitglied "Gesten" fehlt. Stattdessen können Sie event.scale für neuere HammerJS-Versionen verwenden.Überprüfen Sie die API-Referenz für das vollständige Layout des Ereignisobjekts: http://hammerjs.github.io/api/ – kvdv

könnten Sie die Zoomooz Plugin verwenden. Im Inneren der Dokumentation, überprüfen Sie die Zooming inside a container Abschnitt - das ist, was Sie brauchen:

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

Check the JS Fiddle

Quelle

2013-07-25 09:01:20

JSFiddle funktioniert nicht wie erwartet auf mobilen Geräten (wir können Pinch nicht zum Zoomen verwenden). – Basj

Zoom spezifisches Element auf Webinhalt (HTML, CSS, JavaScript)

Antwort

Verwandte Themen