In this tutorial we will create a viewport resizer. So that without resizing your browser window you can check responsiveness of your websites. Viewport comes very handy when you are creating a responsive site. You don’t have to test your website on different devices and also dont’t have resize browser window.
What is Viewport?
Viewport is the size of the browser window. Viewport height and width is different from device width and height.
A responsive website can change its layout according to the device dimensions or viewport dimensions.
But for a website running inside iframe the viewport is not same as browser window size. Its the iframe width and height equal to viewport height and width.
So we can also say that viewport is the visible region of the website.
What is a viewport resizer
Viewport resizer is a program that can test the responsiveness of the website without resizing the window. As we saw that viewport of a website running inside iframe is the size of the iframe. So changing the iframe dimensions will change the viewport of the website. We can use this logic to create a viewport resizer.
Implementation of viewport resizer
This is the code present in the live preview.
-webkit-transition: all 2s;
-moz-transition all 2s;
-o-transition all 2s;
transition: all 2s;
document.querySelector("#myResponsiveWindow").style.width = width + "px";
document.querySelector("#myResponsiveWindow").style.width = "100%";
<div style="height: 40px;">
<iframe id="myResponsiveWindow" src="http://qnimate.com" style="width: 100%; height: 660px"></iframe>
If you selling responsive themes than its better to use a viewport resizer to show how the website responds to different screen width. Users don’t like to resize their browser window to check responsiveness of a website. Thanks for reading this. If you like it please “Like and Share”.