Ottieni le coordinate del centro pagina web sui dispositivi tablet utilizzando JavaScript

Sto provando a calcolare il centro geometrico del viewport su una pagina Web, renderizzato con i dispositivi Tablet (iOS e Android), ovvero il centro effettivo del viewport (ciò che vedi) in base all'attuale traduzione e attuale livello di zoom - non voglio il centro del documento stesso, voglio il centro dello schermo quello che sto visualizzando.Ottieni le coordinate del centro pagina web sui dispositivi tablet utilizzando JavaScript

Il problema è che questo calcolo non tiene conto di alcun tipo di zoom (una traduzione allora).

Su iOS, ho provato con alcune di queste risposte, sulla domanda detecting pinch to zoom on iOS, Sono riuscito a prendere l'evento "OnZoom", ma non ho ottenuto alcun valore, però.

Su Android, non riesco nemmeno a rilevare alcun evento correlato allo zoom. Sono a conoscenza degli eventi touchstart e touchstart, ma come posso distinguere poi per ottenere lo zoom (e il valore dello zoom)

Sto usando la libreria jQuery 1.7.2.

fonte

2012-07-13 jose

tua domanda è confusa. cosa intendi per "centro geometrico del viewport" .. spiegami. – Neji

Questo può sembrare un po 'strano, ma hai provato un div nascosto, posizionato in modo assoluto, allungato per riempire (a sinistra: 0; a destra: 0; in alto: 0; in basso: 0;) e all'interno di quella div un'immagine centrata di un singolo pixel, e quindi ottenere le coordinate dell'immagine usando .position() ;? –

L'immagine non sarebbe grande quanto l'intero documento? Se fosse allungato, il centro non sarà secondo il centro di visualizzazione, penso ... – jose

ho fatto un demo page che è confermata per lavorare su iPhone iPad, Samsung Galaxy Tab 10. Ho attaccato solo l'evento click su un enorme div, quindi toccare lo schermo dopo lo zoom per aggiornare la visualizzazione.

Il calcolo è molto semplice, utilizzare screen.width/window.innerWidth per ottenere il livello di zoom. screen.width sarà sempre in pixel del dispositivo e window.innerWidth è sempre in pixel css, che tiene conto anche dello zoom.

ulteriore calcolo è semplice matematica:

// 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);

Per verificare se l'utente è lo zoom, collegare l'ascoltatore a window.resize e window.scroll che sparare dopo orientationchange nascondere la barra degli indirizzi e lo zoom.

Ecco il mio 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);

fonte

2012-07-18 23:41:11

Impostazione di una semplice pagina HTML, posso ottenere abbastanza vicino al centro.

Con il codice seguente, sto solo controllando la larghezza e l'altezza di un div fisso, e quindi combinandolo con l'offset del documento e alcune semplici matematiche per calcolare il centro, e posizionare un singolo punto nero lì. Posso farlo abbastanza vicino, ma varia sul mio iPhone 4S.

Non ho provato su dispositivi Android.

Non penso che funzionerebbe su iOS < = 4, in quanto non supportano il posizionamento fisso.

<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>

fonte

2012-07-18 03:24:31 ahren

ho avuto una richiesta del client un metodo di rilevazione zoom della pagina in javascript un paio di anni fa.

Nel mio caso, voleva che funzionasse su un'app per Facebook. Attraverso il canvas/viewport dell'iframe.

Ho usato Max e Min funzioni

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 era simile, ma ho dovuto applicare modifiche basate su browser ad esso.

Ho creato un oggetto chiamato viewport che memorizzava le proprietà di un div di posizione fisso, in particolare currentHeight e currentWidth erano offsetHeight e offsetWidth dell'elemento div.

Ho finito per inizializzare un window.intervalTimer per eseguire i controlli sullo stato di quel div, confrontato con i valori memorizzati all'interno dell'oggetto viewport.

Sono abbastanza sicuro che allegare o aggiungere listener di eventi non era un'opzione attraverso l'iframe.

ho ancora il codice di demo in su ad un sito web trascurata I sorta di gestire .. haha http://focalpointproperties.net/vWorker/proj_zoomcontrol.php

fonte

2012-07-24 02:24:36

Ottieni le coordinate del centro pagina web sui dispositivi tablet utilizzando JavaScript

risposta

Problemi correlati