In 1981, IBM revolutionized screen graphics by launching Color Graphics Adapter or CGA for IBM PCs and replaced the monochrome format. Since then, screen graphics have enhanced and improved dramatically. Devices are now built to support high definition. But they come with complicated resolutions.
Resolution is the number of pixels in a particular unit of an area. There are different types of resolution like 720p or 1080i, where p is for progressive and i for interlaced. Nowadays, when customers buy a Windows laptop, they look for good picture quality. In fact, this has raised the uptake of high-resolution (4K) devices. But to increase the overall experience of the buyer, makers of these devices scale pixels up to 150%, and this leads to anomalies.
Problem Statement
While developing a client’s web UI, we discovered this problem. In MacBook, we could see that designs were coming out well on browsers. But when we tested the same on a Windows machine, the design seemed large and zoomed. This shouldn’t have happened because UI designs should deliver the same result across all sets of devices and resolutions.
Our research revealed that windows laptops with higher resolution usually have a default resolution set to 150%. It adjusts the size of icons, text, and navigation elements to make the computer more user-friendly. In our case, it triggered the zoom effect.
Refer to the image below, where the login UI is zoomed in and grabs more attention.
Solution
To fix the issue mentioned in the previous section, we had first to understand how the CSS interprets the device screen resolution. After some analysis, we came to know that the device pixel ratio determines it.
Device pixel ratio is the ratio of resolution in physical pixels to resolution in CSS pixels of the current display device. Learn more about it in detail here.
We realized that we could control the device screen resolution interpretation by CSS with the help of media query device-pixel-ratio and CSS zoom property. In addition, we had to ensure that the zoom happens for the entire UI and not for any particular area, so we had to focus more on the body elements.
For example, consider a windows laptop with a device resolution of 1200px and default scaling set to 150%. UI on the browser will scale as per default. So, if we put the CSS zoom level to 0.8 when the device DPR is 1.5, it will render UI as per 100% zoom level.
Please refer to the below code snippet.
Refer to the diagram given below, login UI now looks normal.
Conclusion
Therefore, if you want to have a seamless experience on your screens, irrespective of your OS and resolutions, add the device-pixel-ration media query. There the zoom property must be targeted at the body element and not at the component level. Once you ensure this, you will get a perfect homogeneous UI experience.
