Подробное объяснение режима масштабирования iPhone

JavaScript
Подробное объяснение режима масштабирования iPhone

задний план

В проекте нужно сделать отдельную адаптацию под вырез экрана айфона, в котором нужно посмотреть, как определить экран челки. Более того, одна и та же модель может иметь разное разрешение экрана.Ниже приводится краткое описание ям, на которые наступил Лю Хайпин.

Обнаружить экран iphone челки

В некоторых случаях нам нужно сделать специальную обработку модели iphone с вырезом с точки зрения стиля. В настоящее время Лю Хайпин предлагает три модели iPhone:iphoneX,iphoneXR,iphoneXS maxтри. Три из них имеют разное разрешение и соотношение пикселей, иiphoneXRа такжеiphoneXS maxДва телефона также доступны放大, так что теоретически есть два разных разрешения. Для ознакомления с режимами отображения см. следующее.

Конкретные резолюции заключаются в следующем:

оборудование Соотношение пикселей (dpr) Разрешение экрана режим масштабирования
iphoneX 3 1125*2436 без
iphoneXs max 3 1242*2688 1125*2436
iphoneXr 2 828 *1792 750*1624

Логика суждения

Подводя итог вышеперечисленным характеристикам, необходимо судить о платформе текущего мобильного телефона по информации в ua и сделать вывод, является ли это моделью челки по полученному на данный момент разрешению. Вставьте код напрямую:

// 获得手机平台
OS: (function() {
    const userAgent = navigator.userAgent;
    if (/\bAndroid\b/i.test(userAgent)) {
      return 'Android';
    } else if (
      /\bip[honead]+\b/i.test(userAgent) ||
      /\biOS\b/i.test(userAgent)
    ) {
      return 'IOS';
    }
    return null;
  }()),
  
// 判断机型
let ratio = window.devicePixelRatio || 1;
let screen = {
  width: window.screen.width * ratio,
  height: window.screen.height * ratio
};
const isX = screen.width === 1125 && screen.height === 2436;
const isXSMAX = screen.width === 1242 && screen.height === 2688;
const isXR = (screen.width === 750 && screen.height === 1624 || screen.width === 828 && screen.height === 1792);

// 那么判断是否是刘海屏
const isIOS = this.OS === 'IOS';
return isIOS && (isX || isXSMAX || isXR);

Почему режим масштабирования нужно адаптировать отдельно

Принцип режима масштабирования iphone заключается в использованииРендеринг с более низким и более высоким логическим разрешением, а затем растягивание на экран.

Например, когда запускается новый телефон, если есть новое разрешение, относительно простая адаптация заключается в адаптации к маленькому экрану с тем же соотношением, что и раньше, например, модель плюс адаптируется к модели с тем же номером. , а макс модель адаптирована под Х модель и так далее.

Существует три логических разрешения экрана iPhone 16:9: 320 × 480, 375 × 667, 414 × 736, что соответствует экранам 4, 4,7 и 5,5 дюймов соответственно. Для экранов с диагональю 4,7" и 5,5" нижние логические разрешения составляют 320x480 и 375x667 соответственно. В то же время, пока приложение адаптировано к этим двум разрешениям (конечно, оно адаптировано), оно может работать напрямую без каких-либо изменений. Ну почему в iPhone X нет режима масштабирования? Поскольку iPhone X не имеет готового логического разрешения более низкого уровня, в случае его принудительного добавления почти все приложения должны быть адаптированы к новому логическому разрешению, которое появляется только в режиме масштабирования iPhone X. Эта стоимость просто слишком велика. . Разумеется, на iPhone XS Max есть режим масштабирования, потому что логическое разрешение iPhone X — это логическое разрешение в режиме масштабирования iPhone XS Max, которое также не требует целенаправленной адаптации.

Категории