Sign in

Width of Screens

Designing for various windows sizes can be challenging. One way to get around this is by using JavaScript.

<script>
alert(window.outerWidth+’ x ‘+window.outerHeight);
</script>

Same can be done in React.js applications.

class Main extends React.Component {
constructor(props) {
super(props);
this.state = { windowWidth: window.innerWidth };
}

const handleResize = (e) => {
this.setState({ windowWidth: window.innerWidth });
};

componentDidMount() {
window.addEventListener("resize", this.handleResize);
}

componentWillUnMount() {
window.addEventListener("resize", this.handleResize);
}

render() {
const { windowWidth } = this.state;
return <div>Current window width: {windowWidth}</div>
}
}

Considering a max break point can help completely getting around dynamically calculating window sizes.

Consider accessing the entire view port using CSS for bigger screens too.

hp-content {    display: block;
width: 100vw;
height: 100vh;
}