JavaScript is a fantastic technology that allows us to perform many operations, including calculating the width and height of our screen, in other words, the screen resolution.
All this processing is done using the screen object, which allows you to obtain the screen resolution in addition to everything related to the screen:
There are various reasons that can be presented to us for wanting to obtain the screen resolution; layout of the contents, information towards the user, using it together to make an overlay, etc. In this post we will see how to obtain the resolution of a screen with native JavaScript.
Obtaining the width and length of a screen
As we can see in the following figure, the screen object is composed of several methods and attributes.
But, in this article our interest is to see How to obtain the screen resolution?
With the following lines of code:
screen.width;
screen.height;In this way we can obtain the resolution in pixels of the screen composed of the screen.width and screen.height components (width and length) of devices such as monitors, phones, tablets, among many others.
We obtain the resolution of the device screen.
In addition to this, we have two other methods that allow us to obtain the resolution of the device without having other elements or rather, interfaces such as the Windows taskbar, etc.; that is to say; the space available to display the web browser.
screen.availWidth; screen.availHeight;Examples of how to get screen resolution with JavaScript
document.getElementById("widthYheight").innerHTML = "Mi resolución de pantalla es: "+screen.width + " px por "+screen.height;
document.getElementById("availwidthYavailheight").innerHTML = "El ancho y alto de mi pantalla para mi navegador web es: "+screen.availWidth + " px por "+screen.availHeight;Detect window resize with JavaScript
Now that you are clear about how to obtain the resolution of the screen (full of our PC) using the screen object in JavaScript, another possible scenario that may arise is how to know when our browser window is resized and what the resolution or width is. browser window height; For the first thing in the JavaScript API there is the onresize event:
<body onresize="FuntionResize()">Which is executed every time the browser is resized; to know how much space in pixels the browser window is taking up we have the outerWidth and outerHeight properties provided through the window object:
function FuntionResize() {
var widthBrowser = window.outerWidth;
var heightBrowser = window.outerHeight;
console.log("Tamaño de la pantalla del navegador: width=" + widthBrowser + ", height=" + heightBrowser);
}Detect resolution change with jQuery
jQuery is a library that gives us a plus when developing our applications; is widely used and it is possible that the site we develop uses this technology; to know how to detect the window size every time the browser is resized we have to:
$(window).resize(function() {
var widthBrowser =$(window).height();
var heightBrowser =$(window).width();
console.log("Tamaño de la pantalla del navegador: width="+widthBrowser +" height="+heightBrowser );
});
Develop with Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter