How to Get the Browser Viewport Dimensions

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

How can I get the browser viewport size and use that to align my website?

Placing this in the head of your page will help you.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

How to set browser viewport size

Here is function to set the viewport size:

def set_viewport_size(driver, width, height):
    window_size = driver.execute_script("""
        return [window.outerWidth - window.innerWidth + arguments[0],
          window.outerHeight - window.innerHeight + arguments[1]];
        """, width, height)
    driver.set_window_size(*window_size)

Usage :

from selenium import webdriver

driver = webdriver.Chrome()

# set the viewport size to 800 x 600
set_viewport_size(driver, 800, 600)

# display the viewport size
print driver.execute_script("return [window.innerWidth, window.innerHeight];")

Get viewport/window height in ReactJS

class AppComponent extends React.Component {

  constructor(props) {
    super(props);
    this.state = {height: props.height};
  }

  componentWillMount(){
    this.setState({height: window.innerHeight + 'px'});
  }

  render() {
    // render your component...
  }
}

Set the props

AppComponent.propTypes = {
 height:React.PropTypes.string
};

AppComponent.defaultProps = {
 height:'500px'
};

viewport height is now available as {this.state.height} in rendering template

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;

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

---

Related Topics