Отличаются CSS позиции текста на разных мониторах с одинаковым разрешением

Question

Писал CSS код для текста, который должен был располагаться ровно в div элементе, но столкнулся с проблемой. Проверяю страничку на двух мониторах. В одном случае текст выходит за рамки div, во втором не выходит, хотя div и все остальные размеры совпадают. . Оба монитора 16:9, 1920:1080, отличаются только герцовкой 60 и 75, диагональю 15.6 и 27(здесь текст вмещается).

Код CSS:

  #startScreen{
  width: 100%;
  height: 100%;
  z-index: 100;
  position:fixed;
}


#startGreetings{
  background: floralwhite;
  width: 50%;
  height: 100%;
  position: absolute;
  display: flex;
}

.welcomeLetters{
  font-size: 150px;
  padding-right: 2.5%;
  opacity: 0;
}

Код HTML, если нужен

  <div id="startScreen">
    <div id="startGreetings">
      <h1 class="welcomeLetters" id="W">W</h1>
      <h1 class="welcomeLetters" id="E1">E</h1>
      <h1 class="welcomeLetters" id="L">L</h1>
      <h1 class="welcomeLetters" id="C">C</h1>
      <h1 class="welcomeLetters" id="O">O</h1>
      <h1 class="welcomeLetters" id="M">M</h1>
      <h1 class="welcomeLetters" id="E2">E</h1>
    </div>
  </div>

Answer 1

Попробуйте добавить вычисление размеров контента и сравните отображение.

<script>
  if (window.devicePixelRatio !== 1) {    
        var dpt = window.devicePixelRatio;
        var widthM = window.screen.width * dpt;
        var widthH = window.screen.height * dpt;
        document.write('<meta name="viewport" content="width=' + widthM+ ', height=' + widthH + '">');  
  }
</script>

БЛОГ НА HUSL

Отличаются CSS позиции текста на разных мониторах с одинаковым разрешением

Ответы (1 шт):