Проблема возникает на Chrome/Android и, возможно, на других мобильных устройствах Chrome. Пока что я смог протестировать его на Nexus 5x. Я использую Handlebars.js для динамического отображения котировок внутри тегов абзаца. Всякий раз, когда отображаемая цитата меньше трех, размер шрифта уменьшается. Мне сложно отладить эту проблему с размером шрифта, потому что, похоже, это происходит в Chrome для мобильных устройств. Проблема не реплицируется в режиме реагирования Chrome dev. Размер шрифта не работает в IOS Safari или Firefox Mobile.
Если у вас есть Chrome на мобильном устройстве, вы можете пройти через игру и посмотреть, заметили ли вы эту проблему? ССЫЛКА ЗДЕСЬ
Вот видео, показывающее изменение размера шрифта: видео проблемы
Вот два снимка бок о бок, которые иллюстрируют проблему. Шрифт в левом изображении больше, чем шрифт в правом изображении:
Вот код для этого раздела сайта (ссылка на репозиторий):
#game-screen {
margin-top: 2%;
@media (max-width: 550px) {
margin-top: 4%;
}
#game-quotes {
width: 90%;
margin: 0 auto;
@media (max-width: 550px) {
width: 95%;
}
p {
font-size: 3.6rem;
@media (max-width: 750px) {
font-size: 2.4rem;
}
@media (max-width: 550px) {
font-size: 1.4rem;
}
}
}
}
<div id="game-screen">
<div id="game-pictures">
</div>
<div id="game-quotes">
<h6 class="center">Quote {{counter}}/10</h6>
<p>"{{content}}"</p>
</div>
</div>