javascript – How to round corners in styles based on screen corner rounding?

Question:

I've looked at a bunch of sites and forums and I can't find how to determine the radius of the screen curvature on the device. I would like to define this value in order to use it in application design.

Example: on ipad pro one radius of rounding on iphone is different.

Tell me, please, how to do this?

If it can be done using JS, it will be cool too)

Answer:

It is not yet possible to find out the radius of curvature of an arbitrary screen using the browser tools (WebView), but you can try to detect popular devices and customize the design for them as you need by experimenting.

In the example, a special css class is added to the root element of the document for iPhones with a bang and a rounded screen so that the style of any element on them can differ in its own characteristics, incl. rounded corners with a suitable border-radius or clip-path.

let ratio = window.devicePixelRatio || 1;
let screen = {
  width: window.screen.width * ratio,
  height: window.screen.height * ratio
};

// iPhone 10—12
if ( screen.width === 1125 && screen.height === 2436 ||
     screen.width ===  828 && screen.height === 1792 ||
     screen.width === 1242 && screen.height === 2688 ||
     screen.width === 1170 && screen.height === 2532 ||
     screen.width === 1284 && screen.height === 2778 ||
     screen.width === 1080 && screen.height === 2340 )
   {
     document.documentElement.classList.add("ios-iphonex");
}