Asahi Sara Asahi Sara - 2 months ago 8
HTML Question

How can get Screen dispositive width with JavaScript

I am trying to set screen dispositive width for a div using JS, using the following line:

var cont = document.getElementById("content");
cont.style.width = (screen.width * 0.93)+"px";


It sets a percentage width equals to the full width of the actual zoom, When use 100% of zoom. It returns 1440, but when use 80% and reload, width increase to 1800.

I need get Screen size of dispositive, independently what zoom is using on.
enter image description here

Or I should to use a zoom listener?

Answer

You can use window.devicePixelRatio as a modifier (at least sometimes)* **

console.log(window.devicePixelRatio * screen.width)

*There is a problem here in how the browser interprets the screen width when zoomed. I ran a quick test with FF, IE and Chrome and while FF and IE are giving the result you describe, Chrome always displays the same width... which means this doesn't work in Chrome (at least).

**I also have no idea of the browser compatibility, it is in working draft status. It seemed to work on the modern browsers I tested at least.

Comments