Using CSS to Display Web Browser Sizes

Responsive web design is critical now-a-days with the increase of mobile device usage. If you are building a new website or redesigning your current website to be mobile responsive, this tutorial can help you with web browser testing. This tutorial will show you how to utilize CSS to display the size of the web browser you are working on. This is done by placing a full width bar at the bottom of the web page. This is helpful if you are physically using different mobile devices to test your website’s design responsiveness.

Create a new CSS file named responsivetest.css or add the following to your current CSS file.

We’ll be creating CSS targeting the body HTML element for each web browser size and I’ll show you how-to create a custom one for web browsers that I do not cover in this tutorial. Let’s start with really small web browsers:

body:after {
    content: "less than 320px";
    font-size: 200%;
    line-height: 1;
    font-weight: bold;
    position: fixed;
    bottom: 0;
    width: 100%;
    padding: 5px 0;
    text-align: center;
    background-color: #000; /* Fallback */
    background-color: hsla(0,0%,0%,0.7);
    color: #fff;
    z-index: 9999;
}

Now, all other web browsers’ sizes will inherit values from the above code snippet, except for the content value, which we will reset.

Now we’ll target web browsers sized 320px to 480px:

@media only screen and (min-width: 320px) {
    body:after {
        content: "320 to 480px";
    }
}

Now we’ll target web browsers sized 480px to 640px:

@media only screen and (min-width: 480px) {
    body:after {
        content: "480 to 640px";
    }
}

Now we’ll target web browsers sized 640px to 800px:

@media only screen and (min-width: 640px) {
    body:after {
        content: "640 to 800px";
    }
}

Now we’ll target web browsers sized 800px to 960px:

@media only screen and (min-width: 800px) {
    body:after {
        content: "800 to 960px";
    }
}

Now we’ll target web browsers sized 960px to 1120px:

@media only screen and (min-width: 960px) {
    body:after {
        content: "960 to 1120px";
    }
}

Now we’ll target web browsers sized 1120px to 1280px:

@media only screen and (min-width: 1120px) {
    body:after {
        content: "1120 to 1280px";
    }
}

Now we’ll target web browsers sized 1280px to 1440px:

@media only screen and (min-width: 1280px) {
    body:after {
        content: "1280 to 1440px";
    }
}

Now we’ll target web browsers sized 1440px and up:

@media only screen and (min-width: 1440px) {
    body:after {
        content: "1440 and up";
    }
}

To create your own, use CSS media queries and define content, just like we did above:

@media <argument> {
    body:after {
        content: "";
    }
}

In the above example, make sure you change <argument> with the targeted min. and / or .max web browser sizes.

You can also change the background colour for all of them in the first example or you can reset the background colour for each web browser size. by default the background colour is 70% of black, #000000. Plus you can add more CSS to each one.