How to check the screen size laptop like 14inch

i want to check if this will happen when someone using 14 inch laptop.

1 Reply

Hi @zed7, The physical size of the display isn't what controls how things look on a webpage. You need to obtain the viewport width for this purpose. You can have a 14" laptop with a 1920 x 1080 resolution and a 24" monitor with the same resolution. Your webpage will look the same on both. At the top of the screen you can see two numbers: 1024 and 814. This is the viewport in pixels, with the first number being width and the second being height. You will mostly be wanting the width, but there are instances where knowing the height can be important. 1366 x 768 is a very common laptop resolution, as is 1920 x 1080. You can edit the two numbers with these values to see how your design will appear at those resolutions (or any other). Also be sure to set the zoom level to 100%. CSS media queries are used to control the appearance of a webpage based on a viewport width/height. Simply put your CSS inside a media query like this (the indentation is just for legibility):

body {
    background: blue;
}
@media screen and (min-width: 1920px) {
    body {
        background: green;
    }
}

body {
    background: blue;
}
@media screen and (min-width: 1920px) {
    body {
        background: green;
    }
}

For any viewport with a pixel width up to 1,919 pixels, the background color of the webpage will be blue. At 1,920 pixels, it becomes green.

Gaming

Programming

How to check the screen size laptop like 14inch