Viewport

When building a website or application, it is important to know who you are building it for. Part of that involves getting a good idea of what kind of devices they are using to view to your project: smartphone, desktop computer, laptop, tablet, etc. Each of the items before has a different display size and capability and it heavily impacts how the content gets structured to be readable by your end users.

This project solves almost none of those issues in any sort of automated or scientific way.

Why?

The idea for this came about when a few of my friends were getting new(-to-them) smartphones at about the same time, and I wanted to know if their phone's displays were significantly different from mine. I also wanted to get a better understanding myself of what sizes to expect to see on mobile devices.

I will sometimes also use this page in my day job to get screenshots of websites in a consistent size for how-to guides in emails for our users.

How it works

At this point in my Javascript career, I was playing around with scopes and closures and what can and can't be done with them.

1. Add an event listener that waits for the page to load to set up the function to display the browser size and the function that updates the page when the viewport window changes size. Adding a defer property to the <script> tag should also work in most browsers.

   window.addEventListener('load', () => {
       // The rest of the code will go here
   });
   

2. Create the function that will update the output on the HTML side.

   let updateSize = (widthElement, heightElement, dprElement) => {
       return () => {
           widthElement.innerHTML = window.innerWidth;
           heightElement.innerHTML = window.innerHeight;
           dprElement.innerHTML = window.devicePixelRatio;
       };
   };
   

   
   Every project has a point where they start to go off the rails. Fortunately for us on this project, this happens on line 2. We are using a closure (Help—I don't know what a closure is! https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures) on the return line to return a function that just sets the content of the elements that are passed in, and it gets to keep the context of our parent element. This means we only have to pass in the elements once on setup and then we can just call it again to update the numbers.
3. Use the updateSize function to the window.onresize listener, passing in a reference to each HTML element.

   window.onresize = updateSize(document.getElementById('width'), document.getElementById('height'), document.getElementById('dpr'));
   

   
   That's when the closure kicks in. The onresize listener will call the returned function, not the updateSize function every time the viewport's size updates.
4. We aren't quite finished yet. There's still one last step to go. Because the onresize event doesn't get fired until the viewport window changes sizes. Since there's nothing preventing us from calling it like a normal function, we can.

   window.onresize();
   

   
   Now, it will display the viewport size right away when the page loads.

You can see everything in action at https://lab.quinngale.com/viewport or on GitHub at https://github.com/quinngale/viewport.