Как сделать так, чтобы Macbooks правильно определял размер объектов на моем сайте?

Question

Я недавно перешел от использования значений пикселей к использованию rem для определения размера моих объектов на моем сайте.Мой старый формат был таким:

.some-class{
  @media (max-width: $split-dimension) {
    width:10px;
  }
  @media (min-width: $split-dimension) {
    width:15px;
  }
}

Я пытаюсь динамически масштабировать объект, используя rem, установив базовый rem в файле scss.Я установил размер, на который нужно разделить. По сути, я говорю, что если окно больше заданного размера, покажите сайт одного размера, а если оно меньше, то покажите другой.Вот этот код:

$split-dimension: 1800px;

:root {
  @media (max-width: $split-dimension) {
    font-size: 41.666%;
  }
  @media (min-width: $split-dimension) {
    font-size: 62.5%;
  }
  body {
    font-size: 1.6rem;
  }
}

.some-class{
  width: 1.5rem;
}

Перед переключением я заметил, что на Macbooks будет отображаться уменьшенная уменьшенная версия сайта даже на экранах с высоким разрешением (я тестировал его на Macbook 2018 года),но она все равно будет выглядеть так же, как и более масштабная версия на машине с Windows (я проверил объекты и увидел, что они используют меньшее значение в Macbook и ожидаемые значения в Window).Изменение CSS меньшего размера разделения повлияет на полноэкранную страницу Macbook, но не на полноэкранную страницу Windows.

После перехода к установке rem и использования одного значения rem для обоих размеров он работает правильно в Windows, нотеперь он отображает объекты правильного размера на Macbook, но сайт выглядит увеличенным (то, что имеет ширину 1900 пикселей, выходит далеко за границы окна браузера, даже если окно больше 1920 пикселей).

Кажется, что он правильно обнаруживает, что окно браузера Macbook теперь больше, чем разделенное измерение, но по какой-то причине объекты все еще масштабируются.Я пробовал это на нескольких MacBook, и у них у всех одна и та же проблема.

Я не могу найти ничего, объясняющего эту проблему с Macbook.Что я могу сделать, чтобы обойти эту проблему?

Answer 1

Я обнаружил, что, изменив

:root {
  @media (max-width: $split-dimension) {
    font-size: 41.666%;
  }
  @media (min-width: $split-dimension) {
    font-size: 62.5%;
  }
  body {
    font-size: 1.6rem;
  }
}

на

:root {
  @media (max-width: $split-dimension) {
    font-size: 6.66px;
  }
  @media (min-width: $split-dimension) {
    font-size: 10px;
  }
  body {
    font-size: 1.6rem;
  }
}

, я получил желаемый результат.