Introduction

The browser is where the magic of a web experience happens from social media to ecommerce and job applications. The address bar, Tabs, Console, extensions, local storage... and the list will still grow.

Frontend developers are responsible for the feel and aesthetics of a webpage. So first and foremost skill for any aspiring Frontend developer is to know more about the window through which we see the web almost every minute. The browser Window.

The basic skill set required for Frontend Developers is making web applications responsive to different sizes of screens including mobile, tabs, laptop, desktop computers and whatnot.

Remember writing the typical width and height properties in your CSS code

  body {
    width: 100vw;
    height: 100vh;
}

And the routine meta viewport tag in our HTML Boilerplate

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

The viewport here refers to the Browser's viewport

So what is the browser viewport in the first place?

Browser viewport is the visible area of the user's screen excluding the tabs, menubar, bookmarks bar, the address bar simply put the entire area where the webpage is visible.

For things to be clear we need to know more about outerHeight, outerWidth, innerHeight and innerWidth of the browsers

outerHeight vs innerHeight

The entire height of the browser is called outerHeight and our viewport where the user sees the contents of the web page is called innerHeight and vice versa for the width property as well. So the main focus should always be innerHeight as well as innerWidth.

Getting hands-on

The simple way to know more about Viewport Height and Width of the device you visit the webpage from is by using the two in-built properties of Javascript

window.innerWidth
window.innerHeight

I have included a Codepen link to play

Challenges

1. Click Edit on Codepen and change the height and width of the output screen to observe the resolution change dynamically

2. Visit https://windowjs.netlify.app/ on your desktop/laptop as well as your mobile. Observe the changes in the screen resolution