1

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?

user3629892
  • 2,960
  • 9
  • 33
  • 64
  • 1
    Can you put more information? What OS you're using? What browser? Btw, are you really trying to use Height? Arent you misleading for Width? – Sornii Aug 26 '17 at 07:00
  • @Sornii Yes, I meant heigh. My OS is WIndows 10 and I am using Chrome. – user3629892 Aug 26 '17 at 10:50

1 Answers1

0

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

cshelswell
  • 83
  • 2
  • 11