When developing for the web, there may be times when you want to retrieve information about the screen. Understanding detailed information about the display used by the device (color depth, width, height, resolution, and whether it is a Retina Display) is essential for responsive design and support for high-resolution displays.
This article introduces how to retrieve and display detailed information about the user’s display using JavaScript. We will explain in detail how to obtain information such as color depth and screen resolution using the `screen` object and the `devicePixelRatio` property.
How to Display Display Information
First, let’s explain how to display information about the user’s display. Specifically, we will cover how to check the color depth, screen width, height, resolution, and whether it is a Retina Display.
What is Color Depth?
Color depth is a measure of how many colors a single pixel on a display can represent. Common computer displays typically have a color depth of 24 bits, allowing them to display approximately 16.77 million colors. Higher color depth enables smoother and more vivid gradients.
Screen Width and Height
Screen width and height are measured in pixels. These values are essential to understanding the size of the displayable area. This information is particularly useful when determining whether the device is a smartphone or a tablet.
Resolution and Retina Display
The `devicePixelRatio` represents the ratio of physical pixels to CSS pixels. Generally, high-resolution displays like Retina Displays have a `devicePixelRatio` value of 2 or higher, allowing for sharper and more detailed visuals.
CSS for Displaying Display Information
To display display information using HTML and JavaScript, you’ll also need some CSS to style the page. Here’s some basic CSS to enhance the appearance. Feel free to customize it as needed.
<style type="text/css">
body {
font-family: Verdana, "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W6", Osaka, "ＭＳ Ｐゴシック", Arial, sans-serif;
padding: 0;
margin: 0;
overflow-x: hidden;
line-height: 1.8em;
text-align: center;
}
h1 {
font-size: 26px;
text-align: center;
font-weight: normal;
padding: 10px 0 20px 0;
line-height: 1.4em;
}
</style>
Applying this CSS will make the display information more visually appealing.
HTML for Display Information Output
Next, prepare the HTML elements where the display information will be output. Use the `id` attribute to specify the locations where JavaScript will insert the information.
<h1>The display information of your device (color depth, width, height, resolution, Retina Display) is shown below:</h1>
<br>
Color Depth: <span id="colordepth"></span> bits<br>
Width: <span id="wd"></span> px<br>
Height: <span id="ht"></span> px<br>
Resolution: <span id="devicepixelratio"></span> dp<br>
<span id="retinadisp"></span>
The above code ensures that the display information retrieved by JavaScript is appropriately inserted into elements with `id=”colordepth”`, `id=”wd”`, `id=”ht”`, `id=”devicepixelratio”`, and `id=”retinadisp”`.
JavaScript for Retrieving Display Information
Now, let’s retrieve display information using JavaScript. The following code demonstrates how to use the `screen` object and `devicePixelRatio` to obtain color depth, screen width, height, resolution, and determine whether the display is a Retina Display.
<script type="text/javascript">
document.getElementById("colordepth").textContent = screen.colorDepth;
document.getElementById("wd").textContent = screen.width;
document.getElementById("ht").textContent = screen.height;
var dp = window.devicePixelRatio;
document.getElementById("devicepixelratio").textContent = dp;
if(dp >= 2){
document.write("<br>This is a Retina Display");
document.getElementById("retinadisp").textContent = "This is a Retina Display";
} else {
document.getElementById("retinadisp").textContent = "This is not a Retina Display";
}
</script>
This code uses the properties of the `screen` object to retrieve the color depth, width, and height of the display and uses `window.devicePixelRatio` to determine the resolution. If the `devicePixelRatio` is 2 or higher, it displays “This is a Retina Display”; otherwise, it displays “This is not a Retina Display.”
Demo Page to Display Display Information (Color Depth, Width, Height, Resolution, Retina Display) 【screen, devicePixelRatio】
Using the code introduced above, let’s create a demo page to display display information. Click the link below to open the demo page and check the display information of your device.
Demo page to display display information (color depth, width, height, resolution, Retina Display)
Summary
In this article, we explained how to use JavaScript’s `screen` object and `devicePixelRatio` to retrieve and display detailed display information. Understanding how to determine Retina Displays and retrieve color depth and screen size is incredibly helpful for web development.
Accurately understanding display information and delivering optimal designs and layouts is essential. Be sure to utilize the techniques introduced here in your projects and learning.
* Please use at your own risk. Do not reuse the Google Analytics tag in the head tag of the demo page.
