Как создать небольшой экран (мобильный) с высокой плотностью пикселей, задающий c размер шрифта в css bootstrap4

Question

Экран моего компьютера составляет 13 дюймов по диагонали и 1300x800 пикселей. Размер экрана моего мобильного телефона составляет 6 дюймов по диагонали и 1700x892 пикселей. Мобильный экран меньше, но много пикселей, что приводит к более высокой плотности пикселей. 1rem на компьютере читабелен, но 1rem на мобильном телефоне слишком мал.

Как лучше всего настроить размер шрифта для экрана мобильного телефона с высокой плотностью пикселей по сравнению с экраном компьютера с низкой плотностью пикселей. Чистый css метод является предпочтительным. MDN говорит, что Safari не поддерживает dpi https://developer.mozilla.org/en-US/docs/Web/CSS/resolution.

В настоящее время я использую большой размер шрифта для небольших экранов следующим образом:

html {
  font-size: 26px;
}

@media (min-width: 992px) {
  html {
    font-size: 18px;
  }
}