firefox и chrome на android, инфляция шрифта на одном p, а не на другом

Я не веб-разработчик. Я начинающий разработчик игр. Я делаю этот веб-сайт, чтобы показать свое портфолио.

Я думаю, что он хорошо выглядит во всех компьютерных браузерах, которые я пробовал. Это должно выглядеть таккак это должно выглядеть

Но в Chrome и Firefox на Android блок текста в правом верхнем углу отображается шрифтом большого размера, что делает этот div огромным и толкает все вниз.

как это выглядит на Android

Итак, изначально был html-файл главной страницы с картой сайта + этот абзац, а отдельные биты о моих проектах, например «артефакт», были отдельными страницами, загруженными в iframe.

Я заметил, что нижний абзац в iframe был в порядке, хотя div относится к тому же классу, что и проблематичный выше.

Вот что я пробовал до сих пор ..

Я сделал этот p новым классом и явно определил его размер текста
Я поместил весь веб-сайт в другой iframe. странно, не имело никакого значения
Я поместил этот абзац в li в ul
Я поместил весь текст в этом абзаце в интервал
Я изменил текст с p на h7

Браузер Android все еще улавливает это и делает текст огромным, а не тот, что ниже..
В Firefox кажется, что это вызвано «инфляцией шрифта», и я могу обойти это, изменив настройки Firefox. Но почему он раздувает только один абзац и игнорирует другой?

Пожалуйста, обрати внимание. Я сделал все на этом сайте в пикселях, а не в % или em. Если я смогу заставить Android не взрывать этот абзац, все будет хорошо.


person Guye Incognito    schedule 09.08.2013    source источник


Ответы (2)


На самом деле я нашел хорошее решение для этого. Добавьте эту строку в свой css..

HTML * {максимальная высота: 1000000 пикселей;}

В любом случае исправляет это на Chrome и Firefox на Android.

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

person Guye Incognito    schedule 27.11.2013

У нас есть идея под названием Font Boosting, она предназначена для того, чтобы сделать текст, который трудно читать на мобильном устройстве, более читабельным. Вы не можете обойти это, кроме как создать оптимизированный для мобильных устройств сайт, включив метатег мобильной области просмотра <meta name="viewport" content="width=device-width">, это отключит усиление шрифта, но это будет означать, что ширина экрана измеряется в пикселях CSS и составляет около 480 пикселей. на Нексус4.

person Kinlan    schedule 27.09.2013
comment
По крайней мере, в моем случае наличие <meta name="viewport" content="width=device-width"> не имеет абсолютно никакого значения, а Chrome mobile (v88) по-прежнему применяет усиление шрифта к некоторым элементам. - person Arad; 07.02.2021