Holen Sie Website-Center-Koordinaten auf Tablet-Geräten mit JavaScript

Ich versuche, das Ansichtsfenster geometrischen Zentrum auf einer Webseite zu berechnen, gerendert mit Tablet-Geräten (iOS und Android), die tatsächlichen CENTER des Ansichtsfensters (was Sie sehen) nach aktuellen Übersetzung und aktuelle Zoom-Ebene - möchte nicht die Mitte des Dokuments selbst, ich möchte die Mitte des Bildschirms, was ich gerade sehe.Holen Sie Website-Center-Koordinaten auf Tablet-Geräten mit JavaScript

Das Problem ist, dass diese Berechnung keine Art von Zoom (und dann) Übersetzung berücksichtigt.

Auf iOS, habe ich mit einigen dieser Antworten versucht, auf die Frage detecting pinch to zoom on iOS, Ich war in der Lage, das Ereignis "OnZoom" zu fangen, aber bekam keinen Wert, obwohl.

Auf Android kann ich nicht jedes Ereignis im Zusammenhang mit Zoom erfassen. Ich kenne touchmove und touchstart Ereignisse, aber wie kann ich dann unterscheiden, um Zoom (und Zoom-Wert) zu erhalten

Ich benutze jQuery 1.7.2-Bibliothek.

Quelle

2012-07-13 jose

Ihre Frage verwirrend. was meinst du mit "Ansichtsfenster geometrisches Zentrum" .. plz erklären. – Neji

Das mag ein bisschen seltsam klingen, aber hast du ein verstecktes, absolut positioniertes div versucht, das gestreckt wurde (links: 0; rechts: 0; oben: 0; unten: 0;) und innerhalb dieses div ein zentriertes Einzelpixelbild, und dann die Koordinaten des Bildes mit .position(); –

Wäre dieses Bild nicht so groß wie das gesamte Dokument? Wenn es das gedehnt würde, wird die Mitte nicht nach der Ansichtsfenstermitte sein, denke ich ... – jose

Ich habe ein demo page gemacht, die auf dem iPhone iPad, Samsung Galaxy Tab zu arbeiten bestätigt werden 10. Ich habe nur das Click-Ereignis auf einem riesigen div angebracht, so tippen auf dem Bildschirm nach dem Zoomen der Anzeige zu aktualisieren.

Die Berechnung ist sehr einfach, verwenden Sie screen.width/window.innerWidth, um die Zoomstufe zu erhalten. screen.width wird immer in Gerätepixeln sein und window.innerWidth ist immer in css Pixel, die auch den Zoom berücksichtigen.

weitere Berechnung ist einfache Mathematik:

// round the result down to avoid "half pixels" for odd zoom levels 
Math.floor(window.scrollY + window.innerHeight/2); 
Math.floor(window.scrollX + window.innerWidth/2);

Um zu überprüfen, ob der Benutzer das Zoomen, befestigen Sie den Hörer auf window.resize und window.scroll die nach orientationchange Ausblenden der Adressleiste ausgelöst wird und Zoomen.

Hier ist meine Demo JavaScript:

var dot = document.getElementById("dot"); 
document.getElementById("main").addEventListener("click", function(e) { 
    var zoom = screen.width/window.innerWidth; 
    alert("zoom: " + zoom + "\n" + "ScrollY: " + window.scrollY); 

    dot.style.top = Math.floor(window.scrollY + window.innerHeight/2 - 5) + "px"; 
    dot.style.left = Math.floor(window.scrollX + window.innerWidth/2 - 5) + "px"; 

}, false);

Quelle

2012-07-18 23:41:11

Einrichten einer einfachen HTML-Seite, kann ich ziemlich nah an der Mitte zu bekommen.

Mit dem unten stehenden Code, ich überprüfe nur die Breite und Höhe eines festen div, und dann kombinieren Sie das mit dem Dokument Offset und einige einfache Mathematik, um die Mitte herauszufinden, und platzieren Sie einen einzigen schwarzen Punkt dort. Ich kann es ziemlich nah bekommen, aber es variiert auf meinem iPhone 4S.

Habe nicht auf Android-Geräten versucht.

Ich glaube nicht, dass dies unter iOS < = 4 funktionieren würde, da sie keine feste Positionierung unterstützen.

<style> 
#fixed{ 
position: fixed; 
left: 0; right: 0; top: 0; bottom: 0; 
background: orange; opacity: 0.25; 
} 
.black{ 
    position: absolute; 
    top:0;left:0; 
    width: 1px; height: 1px; 
    background: black; 
} 
</style> 

<body> 
<div id="fixed"></div> 
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script> 
<script> 
jQuery(function($){ 
setInterval(function(){ 
var top = ($("#fixed").height()/2) + $("#fixed").offset().top; 
var left = ($("#fixed").width()/2) + $("#fixed").offset().left; 
$("body").append('<div class="black" style="top: '+top+'px; left: '+left+'px;" />'); 
}, 1500) 

}); 
</script> 
</body>

Quelle

2012-07-18 03:24:31 ahren

ich eine Client-Anfrage vor in Javascript ein paar Jahren eine Seite Zoom-Detektionsverfahren hatte.

In meinem Fall wollte er, dass es auf einer Facebook-App funktioniert. Durch den Iframe-Canvas/Viewport.

verwendet I Max und Min-Funktionen

function getDocHeight() { 
    var D = document; 
    return Math.max(
     Math.max(D.body.scrollHeight, D.documentElement.scrollHeight), 
     Math.max(D.body.offsetHeight, D.documentElement.offsetHeight), 
     Math.max(D.body.clientHeight, D.documentElement.clientHeight) 
    ); 
} 
function getDocWidth() { 
    var D = document; 
    return Math.max(
     Math.max(D.body.scrollWidth, D.documentElement.scrollWidth), 
     Math.max(D.body.offsetWidth, D.documentElement.offsetWidth), 
     Math.max(D.body.clientWidth, D.documentElement.clientWidth) 
    ); 
} 

function getMinHeight(h) { 
return Math.min(viewport.currentHeight, getDocHeight(), h); 
}

getMinWidth ähnlich war, aber ich hatte browserbasierte Optimierungen, um es anzuwenden.

Ich habe ein Objekt namens Viewport erstellt, das die Eigenschaften einer festen Position div speichert, speziell currentHeight und currentWidth waren die offsetHeight und offsetWidth des div-Elements.

Ich endete mit der Initialisierung eines window.intervalTimer, um Prüfungen des Zustands dieses div durchzuführen, verglichen mit den gespeicherten Werten innerhalb des Viewport-Objekts.

Ich bin ziemlich sicher, Anhängen oder Hinzufügen von Ereignis-Listenern war keine Option durch den Iframe.

Ich habe noch den Demo-Code bis zu einer vernachlässigten Webseite Art verwalten i .. haha http://focalpointproperties.net/vWorker/proj_zoomcontrol.php

Quelle

2012-07-24 02:24:36

Holen Sie Website-Center-Koordinaten auf Tablet-Geräten mit JavaScript

Antwort

Verwandte Themen