Width and height of the screen JavaScript - ProgrammerTech
Language:

Search

Width and height of the screen JavaScript

  • Share this:
Width and height of the screen JavaScript

Screen width and height control

The screen size is controlled by screen.width and screen.height, where the screen width element brings the width of the screen, and the screen.height element brings us the screen height. You can create responsive websites or execute commands based on different phone screens or computer screens.

 

screen.width

If we display the screen.width element data on our device, we will write the code as.

alert(screen.width);

We wrote the alert command and gave it to print the width of our device's screen via screen.width and when we run this code in the browser we will get the result 1366, which is the screen width of my current device.

 

screen.height

If we display the screen.height element data on our device, we will write the code as.

alert(screen.height);

We typed the command to print the data via alert and gave it to print the height of our device via screen.height. And when we run this code in the browser, we will get the result 590 pixels, which is the height of the screen for my current device. Remember well that when using these two commands, it will give us the value of the data type of number type and not of the text type, and to make sure of this we will use this command.

alert(screen.height - 150);

We wrote in the command, subtract 150 pixels from the width of the screen and subtract it to us, and in fact there is 440 pixels left. This indicates that the data type is numbers and not text. And we review the result in the browser and see if this is true or not, it will give us the result 440. Let's take an actual example in order to understand the matter more and how to use these things, first if you are using the google chroom browser, follow the following steps shown in the pictures. We click the right button of the mouse on the page and choose Inspect.

choose inspect javascript

 

Then we choose the option shown in the image Elements and then click on the screen sign next to it.

choose elements

 

Then we go to the place you see in front of you and choose the screen size you want, I chose the Galaxy S5.

choose the desired size

 

As we can see that we chose the Galaxy S5, the height is 640 pixels and the width is 360 pixels. For example, we want to execute commands only on devices that are 640 * 360, to do this we write a conditional statement as follows.

alert(screen.wedth);
if (screen.width == 360 && screen.height == 640){
	document.body.style .background = "red";
}

We set an alert in order for a Dialogue to pop up giving us the screen width. Then we put a conditional sentence saying if the width is 360 pixels and the height is 640 pixels, I will be given a command to change the wallpaper to red, and if the condition is met, the background will immediately change to red. The result will be.

commands executed

 

In this way, we can specify the sizes we want, and if we change the device type, the commands will not be executed at all because the parameter is 640 * 360 pixels. So we want to execute the commands on all devices that have a width of less than 640 pixels.

alert(screen.height);
if (screen.width < 640){
	document.body.style .background = "red";
}

He explained this as before, but we told him he likes to execute commands on all sizes that are less than 640 pixels.


Muhammad Alush

Muhammad Alush

إسمي محمد تركي العلوش من سورية من ريف حلب الشرقي 1994, محب للتقنية و التعلم الذاتي, و جميع خبراتي تعلمتها ذاتياً, و اللغات البرمجية التي أتقنها هي html, css, javascript, php, c, python بالإضافة إلى حبي الكبير لمجال الشبكات.

موقعي programmer-tech.com