Почему текст абзаца сокращается в Chrome для мобильных устройств?

Проблема возникает на 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>

Ответы

Ответ 1

Вы можете проверить, установлен ли размер вашего Chrome на 100% в настройках вашего телефона? Chrome для Android имеет возможность отображать шрифт с другим значением. Вы можете найти эту опцию в: Меню → Настройки → Доступность. Я сделал такую ошибку несколько недель назад, и я хочу быть уверенным, что это не так. Извините, если я вне линии.

Я также обнаружил, что по какой-то неизвестной причине Chrome для Android устанавливал эту настройку шрифта неправильно во время установки. Я не мог воспроизвести это поведение, но у меня есть один телефон, родственник, с этим, поэтому возможно, что вы не знаете, что этот параметр не установлен на 100%.

Ответ 2

я добавил * после выбора абзаца для выбора всего абзаца. возможно, это решит вашу проблему. скажите, пожалуйста, если это сработало, я хочу знать результат:)

#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;
      }
    }
  }
}

Ответ 3

Я не уверен, что это ответ на ваш вопрос, но я считаю это последовательным для CSS:

body {
    /** Setting the 'font-size' property of the <body> to 62.5%
     *   allows you to use the 'em' measurement as you would in 'px' form.
     *   ...hope that clear.
    */
    font-size: 62.5%;
}

#someDivInBody {
    font-size: 1.65em; /* or '16.5px' by CSS */
}

Этот метод позволяет мне использовать измерение em, как и в px, но с большей согласованностью и контролем.

Ответ 4

Блок rem не похож на px или em. Когда вы изменяете размер окна, использование rem будет поддерживать соотношение текста и размера окна одинаково. Попробуйте использовать em или px для устранения проблемы:)

Ответ 5

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

попробуйте использовать max-width: Разрешение ;

Вам нужно применить это к классу body, чтобы это применимо ко всему.

т.е.

`.body {`<br>
`    max-width: 3840px;` /*4K resolution, for 4K displays*/

СЛЕДУЕТ исправить проблему с текстом. Если нет, обратитесь к https://www.w3schools.com или https://developer.mozilla.org/en-US/. он может помочь вам.

Ответ 6

Для перекрестной совместимости для моих веб-страниц я склонен использовать следующее:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Кажется, что это не работает с дополнительным стилем с CSS, необходимым для мобильных платформ. Не уверен, что это то, что вы хотите.