Размер шрифта заголовка Bootstrap невелик в мобильных устройствах при использовании rem

В моем приложении я использую Bootstrap, и я установил 2rem в свой элемент h2 и 1.7rem в свой тег h3. Даже если я отрегулирую ширину браузера на своем рабочем столе (до размера мобильного), h1 больше h3, что и я хочу. Но если я использую инструменты разработчика для переключения на вид мобильного устройства или просмотра сайта с моего телефона, h1 становится меньше h3! Что может быть здесь? Это произошло на нескольких сайтах, которые я создал.

Пример скрипта (не удалось воспроизвести проблему в скрипте, но это код): https://jsfiddle.net/gor87kg6/1/

Живой сайт, у которого есть проблема: http://jayatours.lk/

Ответ 1

Следуя первому подходу Bootstrap mobile, я заметил, что ваш сайт не использовал метаданные в viewport.

Попробуйте добавить к <head> следующее:

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

Фоновая информация:

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

Информация о просмотре:

Свойство width определяет размер окна просмотра. Его можно настроить на определенное количество пикселей, например width = 600, или на значение ширины устройства специального значения, которое является шириной экрана в пикселях CSS в масштабе 100%. (Существуют соответствующие значения высоты и высоты устройства, которые могут быть полезны для страниц с элементами, которые изменяют размер или позицию на основе высоты окна просмотра.)

Я полагаю, что это может быть причиной вашей проблемы, поскольку использование rem кажется правильно реализовано. Это может быть более вероятным вплоть до dpi/ screen resolution самого устройства mobile/ tablet.

Ответ 2

rem - это единица относительно размера шрифта базового (html) тега. По умолчанию в браузерах обычно 16 пикселей, если вы явно не объявили его. Возможно, у мобильного браузера меньше значения по умолчанию?

Попробуйте установить базовый размер шрифта перед использованием rem единиц:

html { font-size: 16px; }

Ответ 3

Я не вижу никаких проблем. Если вы все еще видите проблему, возможно, есть два способа решить эту проблему: 1) Посмотрите, что размер шрифта h1 снова не задан в запросе на медиа 2) Проверьте базовый шрифт, примененный к html, и будет ли он reset в запросе на медиа