javascript shows different screen resolution

Question

When I use availHeight oder height , as suggested here , I get a different resolution from what my OS tells me.

I says 1280 height, but in my OS I put 1690. Why is that?

I have no browser zoom.

Is there a way to get the actual resolution?

Answer 1

I basically wrote my own thing to solve this (very handy for responsive sites). I know there are plugs that exist but Safari is somewhat lacking.

So I only normally use the width to know when to add a media query but just add:

let viewportHeight = $(window).height();

to the following:

$(window).resize(function(){
    let viewportWidth = $(window).width();
    let ems = viewportWidth / parseFloat($("body").css("font-size"));
    $('#viewport').html(viewportWidth+" | "+ems);

    $('#viewport-height').html(viewportHeight+" | "+ems); //add this for height
});

And then some simple CSS for viewing the size of your window:

#viewport {
 background: #000;
 color: #000;
top: 0;
right: 10px;
position: fixed;
z-index: 100;
}

This has never let me down yet, and you can see pixel by pixel when you reduce / increase browser size to help make the media queries.

Hope that helps...