Как скруглить углы в стилях в зависимости от скругления углов экрана?
Облазил кучу сайтов и форумов и не могу найти, как определить радиус скругления экрана на устройстве. Хотелось бы определить это значение, чтобы использовать это в дизайне приложений.
Пример: на ipad pro один радиус у скругления на iphone другой.
Подскажите, пожалуйста, как это сделать?
Если это можно сделать средствами JS, будет тоже круто)
Ответы (1 шт):
Выяснить радиус скругления произвольного экрана средствами браузера (WebView) пока не получится, но можно пытаться детектировать популярные устройства и настраивать дизайн под них, как вам нужно, путем экспериментов.
В примере добавляется специальный css-класс в корневой элемент документа для айфонов с челкой и закругленным экраном, чтобы стиль любого элемента на них мог отличаться своими особенностями, в т.ч. закруглением уголков с подходящим border-radius или 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");
}