Размер сгенерированного шрифта HTML отличается от исходного
У меня есть простая веб-страница, на которой есть кнопка, добавляющая текст на веб-страницу. Однако по какой-то причине размер добавленного текста отличается от исходного текста при просмотре в браузере на мобильном телефоне (но при просмотре в браузере, работающем на ПК), он выглядит нормально.
Короче говоря, в файле test2.html у меня есть следующее:
<p>extra1</p>
<div id = "extra"></div>
Затем я нажимаю кнопку, которая обновляет <div>, и получаю:
<p>extra1</p>
<div id = "extra"><p>Note: if the game involves jumping into shallow water, please remind players to jump in feet first to avoid injury.</p><p></p></div>
(как вырезать и вставить из диалогового окна проверки браузера Chrome)
На смартфоне сгенерированный текст имеет гораздо больший размер шрифта, чем исходный текст при просмотре в браузере смартфона (я воспроизвел на двух разных смартфонах Android с браузерами Chrome). Кажется, этого не происходит при просмотре с ПК, но это может быть связано с размером шрифта по умолчанию на ПК.
У меня есть стиль, указанный в <head>, вот так:
<style> h1 {font-size: 2em;} h2 {font-size: 1.4em;} p {font-size: .95em;} </style>
Поэтому я ожидаю, что два абзаца будут иметь одинаковый размер. К сожалению, мне не удалось привести минимальный пример, однако тестовую веб-страницу, на которой он воспроизводится, можно найти по адресу www.ulvr.com/swimactivities/test2.html -- еще раз прошу прощения, так как у меня нет сертификата. для веб-страницы, поэтому на ней появляются предупреждения о том, что она небезопасна... Версия Chrome, установленная на моем мобильном телефоне и воспроизводящая проблему, - 126.0.6478.122.
Кто-нибудь знает, что может вызвать такое поведение?
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 3
Любой текст, добавленный в #extra div, унаследует тот же размер шрифта, что и окружающие его компоненты, если используется font-size: inherit;.
Здесь обновленный код:
<style>
body {
font-size: 16px;
}
h1 {
font-size: 2em;
}
h2 {
font-size: 1.4em;
}
p {
font-size: 0.95em;
}
#extra {
font-size: inherit;
}
</style>
Я подтвердил проблему увеличения текста в Chrome на Android. Как прокомментировал Ральф, мое тестирование показало, что включение метатега области просмотра в <head> решает проблему.
<meta name = "viewport" content = "width=device-width, initial-scale=1.0">
screenshot without meta tag
screenshot with meta tag
Вы можете попробовать добавить тег области просмотра:
<meta name = "viewport" content = "width=device-width, initial-scale=1">
Обязательно добавьте метатег области просмотра, чтобы избежать неожиданных результатов на мобильных устройствах.