SfondoOttenere larghezza disponibile affidabile e l'altezza utilizzando JavaScript
Sto avendo difficoltà a raggiungere una dimensione di finestra affidabile utilizzando JavaScript. Ho letto il numero this guide per configurare l'applicazione e this guide per informazioni sul targeting di risoluzioni specifiche del dispositivo.
Questo è il tag <meta> sulla pagina:
<!DOCTYPE html>
...
<meta name="viewport" content="target-densitydpi=device-dpi" />
Questo mi permette di utilizzare le immagini più nitide per disegnare l'interfaccia. Per provare la risoluzione che ho scritto questo pezzo di codice:
window.addEventListener('orientationchange', function() {
console.log(screen.availWidth + ' x ' + screen.availHeight)
}
// 1080 x 1920 or 1920 x 1080
Problema 1
avevo sperato i pixel effettivamente disponibili potrebbero essere calcolata come:
width := screen.availWidth/devicePixelRatio
height := screen.availHeight/devicePixelRatio
Ma la devicePixelRatio è fissato a 3, indipendentemente dal dpi di destinazione; quindi, come posso determinare i pixel effettivi a mia disposizione?
Problema 2
Quanto sopra screen.availHeight non è esatto perché non tiene in considerazione l'altezza effettiva del componente WebView.
ho provato queste alternative:
console.log(document.documentElement.offsetHeight);
// 1920
console.log(window.innerHeight);
// 240
Questi valori sono praticamente inutile, e peggio, non cambiano quando lo schermo ruota né sono dipendenti dalla dpi bersaglio. C'è un modo migliore per farlo?
Forse i valori di jQuery width() e height() restituiranno valori corretti per te? http://responsejs.com/labs/dimensions/ –
Hye jack per favore fammi sapere come hai ottenuto la dimensione finalmente che funziona per voi. Anch'io sto affrontando lo stesso problema. – virus