CSS обходной путь для поведения масштабирования Safari при использовании: root размера шрифта в зависимости от ширины области просмотра - PullRequest
Новая
       18

CSS обходной путь для поведения масштабирования Safari при использовании: root размера шрифта в зависимости от ширины области просмотра

0 голосов
/ 06 апреля 2020

У меня есть следующие настройки (https://jsfiddle.net/n9bs2rky/):

  1. Увеличение на веб-странице
  2. A CSS Правило :root Настройка размер шрифта на основе ширины области просмотра

Для Chrome и Firefox, независимо от уровня масштабирования, я могу предсказать вычисленный размер шрифта элемента <html>, используя следующую формулу: 

var expectedRootFontSize = viewportWidthInPx * rootFontSizeInVw / 100;

Это не относится к Safari на рабочем столе. Прогнозируемое, ожидаемое значение не соответствует фактическому размеру шрифта, который использует Safari.

Существует ли обходной путь CSS, чтобы Safari работал так же, как Firefox и Chrome?

В Safari имеются известные ошибки, связанные с масштабированием страницы и медиазапросами , но я не смог найти ошибок, связанных с масштабированием страницы и размером элемента.

Код

HTML: 

<p>Test</p>

CSS: 

:root {
  font-size: 1vw;
}

p {
  font-size: 4em;
}

JavaScript: 

function handleResize() {

  var viewportWidth = window.getComputedStyle(document.documentElement, null).getPropertyValue('width');
  var viewportWidthInPx = parseInt(viewportWidth);
  var rootFontSizeInVw = 1;
  var expectedRootFontSize = viewportWidthInPx * rootFontSizeInVw / 100;

  var actualRootFontSize = window.getComputedStyle(document.documentElement, null).getPropertyValue('font-size');

  document.getElementsByTagName("p")[0].innerHTML = "The font size of the html element (" +
    actualRootFontSize +
    ") should be " +
    viewportWidthInPx +
    " * " +
    rootFontSizeInVw +
    " / 100 " +
    " ≈ " +
    expectedRootFontSize +
    ".";
}

window.onresize = handleResize;
handleResize();

Код выше приведен в следующий JSFiddle: https://jsfiddle.net/n9bs2rky/.

Шаги для воспроизведения

Для воспроизведения этой проблемы выполните следующие действия:

  1. Откройте Safari (или другое браузер для сравнения).
  2. Перейдите к https://jsfiddle.net/n9bs2rky/.
  3. Нажмите Вид> Увеличить (или нажмите ⌘ +).
  4. Проверьте рассчитанные размер шрифта элемента <p>.

Я протестировал использование следующих версий браузера на рабочем столе macOS со следующими результатами: 

|--------------------------------|------------------------------------------------------------------------------------------|
| Browser                        | Result                                                                                   |
|--------------------------------|------------------------------------------------------------------------------------------|
| Safari 13.1 (14609.1.20.111.8) | The font size of the html element (5.260000228881836px) should be 457 * 1 / 100 ≈ 4.57.  |
|--------------------------------|------------------------------------------------------------------------------------------|
| Chrome 80.0.3987.149           | The font size of the html element (4.76364px) should be 476 * 1 / 100 ≈ 4.76.            |
|--------------------------------|------------------------------------------------------------------------------------------|
| Firefox 74.0.1                 | The font size of the html element (4.7px) should be 470 * 1 / 100 ≈ 4.7.                 |
|--------------------------------|------------------------------------------------------------------------------------------|

JavaScript Обходной путь

Я могу использовать следующие JavaScript, чтобы обойти проблему, но я ищу CSS -только решение. 

// https://stackoverflow.com/a/42189492
if (
  navigator.userAgent.indexOf("Safari") != -1 &&
  navigator.userAgent.indexOf("Chrome") == -1
) {
  function handleResize() {
    document.documentElement.style.fontSize =
      parseInt(
        window
          .getComputedStyle(document.documentElement, null)
          .getPropertyValue("width")
      ) *
        0.01 +
      "px";
  }

  window.addEventListener("resize", handleResize);
  handleResize();
}
...