Geek asks and answers

Getting reliable accessible width and height with javascript

Background

I'm having trouble getting a reliable viewport size using JavaScript. I read this guide to configure the application and this guide to learn about targeting specific device permissions.

This is the tag <meta>on the page:

<!DOCTYPE html>
...
<meta name="viewport" content="target-densitydpi=device-dpi" />

This allows me to use the sharpest images to draw the interface. To check the resolution, I wrote this piece of code:

window.addEventListener('orientationchange', function() {
    console.log(screen.availWidth + ' x ' + screen.availHeight)
}
// 1080 x 1920 or 1920 x 1080

Problem 1

I was hoping the actual available pixels could be calculated as:

width := screen.availWidth / devicePixelRatio
height := screen.availHeight / devicePixelRatio

But devicePixelRatiofixed in 3, regardless of the target dpi; so how can i determine the actual pixels at my disposal?

Problem 2

screen.availHeight , WebView.

:

console.log(document.documentElement.offsetHeight);
// 1920
console.log(window.innerHeight);
// 240

, , , , dpi. ?

+5
2

, SDK Android -, Java, ? , +,

webview.loadUrl("javascript:setResolution(x,y,orientation)");

javascript .

, javascript, , - , , , -, , - . ( webview, ​​ cordova, javascript)

+3

CSS , ?

, , matchMedia.js - - - JavaScript. - , ? , , -webkit-device-pixel-ratio ( , )?

0

More articles:


All Articles