Get the Size of the Screen, Current Web Page and Browser Window

Get the size of the screen, current web page and browser window

You can get the size of the window or document with jQuery:

// Size of browser viewport.
$(window).height();
$(window).width();

// Size of HTML document (same as pageHeight/pageWidth in screenshot).
$(document).height();
$(document).width();

For screen size you can use the screen object:

window.screen.height;
window.screen.width;

how to get browser window size in javascript?

You can use this:

var width = window.innerWidth;
var height = window.innerHeight;

UPDATE:

To set the width of the two div elements when screen is equal or smaller than 568px you can do:

if(width <= 568) { document.getElementById('div_1').style.width = '38%'; document.getElementById('div_2').style.width = '62%'; }

Or using a CSS only based solution which I think is recommended and more simpler in this case, by taking advantage of media queries:

.container{  width: 100%;}.div_element {  height: 100px;  width: 100%;}#div_1 {  width: 38%;  background: #adadad;}#div_2 {  width: 62%;  background: #F00;}@media(max-width: 568px) {  #div_1 {    width: 38%;  }  #div_2 {    width: 62%;  }  .div_element {    float: left;  }}

<div class='container'>  <div id='div_1' class='div_element'>    div 1  </div>  <div id='div_2' class='div_element'>    div 2  </div></div>

Get the max-viewport size of user browser window

with some good suggestions pointing me in the right direction I have now understood my problem.. I think.

These two bad boys are actually doing the trick:

var width = window.screen.availWidth;
var height = window.screen.availHeight;

BUT!! I am on a desktop running windows and the taskbar at the bottom is actually overlaying the chrome browser window! This was what made me confused to start with. So... yeah. I guess that is it. I just have to live with my users beeing able to put the divs under the win taskbar. Well ok! Bye

How do I get the screen size to show when Chrome console is open?

Known bug, already fixed: https://bugs.chromium.org/p/chromium/issues/detail?id=582421

It should land in M50. If you need it sooner then it is currently in Canary (side-by-side with standard Chromes) or you can use the Dev channel of Chrome.

Get constant browser height and width

Use a window.onresize function as well as a window.onload handler to update the width and height variables.

(Resizeable Demo)

var width,height;window.onresize = window.onload = function() {    width = this.innerWidth;    height = this.innerHeight;    document.body.innerHTML = width + 'x' + height; // For demo purposes}

Protractor: How do I get the current browser width?

There was indeed too many promises going on in this function. I had to nest needing the width and the current url so things would be defined and usable at the correct times.

Roughly the working code:

login: function() {
  var self = this;

  browser.get(browser.baseUrl);

  browser.getCurrentUrl().then(function(url) {
    if(url !== browser.baseUrl) {
      browser.manage().window().getSize().then(function(size) {
        if (size.width == 600) {
          self.mobileLogout();
        } else {
          self.desktopLogout();
        }
      }
    }

    self.loginPage.login();
  }
}

How can I dynamically get browser height and width?

Try this code snippet

(function() {  window.onresize = displayWindowSize;  window.onload = displayWindowSize;
  function displayWindowSize() {    let myWidth = window.innerWidth;    let myHeight = window.innerHeight;    // your size calculation code here    document.getElementById("screen").innerHTML = myWidth + "x" + myHeight;  };

})();

<div id="screen"></div>

How to get the browser viewport dimensions?

Cross-browser `@media (width)` and `@media (height)` values

const vw = Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0)
const vh = Math.max(document.documentElement.clientHeight || 0, window.innerHeight || 0)

`window.innerWidth` and `window.innerHeight`

gets CSS viewport @media (width) and @media (height) which include scrollbars
initial-scale and zoom variations may cause mobile values to wrongly scale down to what PPK calls the visual viewport and be smaller than the @media values
zoom may cause values to be 1px off due to native rounding
undefined in IE8-

`document.documentElement.clientWidth` and `.clientHeight`

equals CSS viewport width minus scrollbar width
matches @media (width) and @media (height) when there is no scrollbar
same as jQuery(window).width() which jQuery calls the browser viewport
available cross-browser
inaccurate if doctype is missing

Resources

Live outputs for various dimensions
verge uses cross-browser viewport techniques
actual uses matchMedia to obtain precise dimensions in any unit

Finding current width of the web page in my browser

You can't get the width of the browser view in plain HTML/CSS. But, you can in Javascript:

var viewportWidth  = document.documentElement.clientWidth;
var viewportHeight = document.documentElement.clientHeight;

If you just want the width for debugging purpose, you can find the browser size in Developers Tools.

For example, on Firefox, you can open Developers Tools (Ctrl+Shift+I) and then use the Adaptive View panel (available on the right), note the real viewport on the top left of this screenshot:

Example Developer Tools

Get the Size of the Screen, Current Web Page and Browser Window