Я сталкиваюсь с проблемой, которую я не могу зафиксировать в теме Wordpress, которую я пишу для кого-то.На мобильном телефоне размер шрифта отличается в зависимости от количества абзацев

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

Вопрос касается мобильных телефонов.

Если у вас есть четыре или меньше пунктов шрифт очень мал, так как:

Если добавить пятый пункт перепрыгнул до размера, который предназначен.

Это согласуется через различные варианты размеров устройства Инструменты разработчика вы можете проверить, и два телефона я был в состоянии проверить это здесь в моем доме.

Основной класс, который не содержится внутри запроса средств массовой информации заключается в следующем:

.sprogWeekOverview p, .post p{ 
    margin: .67em 0; 
    font-family: Georgia, serif; 
    font-size: 1.15em; 
    color: #1f1f1f; 
    padding: 4px; 
}

Другой код CSS с запросами средств массовой информации является:

@media screen and (max-width: 680px){ 

    .sprogWeekOverview p, .post p{ 
     margin: 8px 0; 
     font-family: Georgia, serif; 
     font-size: 16px; 
     color: #1f1f1f; 
     padding: 2px; 
    } 

    } 

@media screen and (min-width: 681px) and (max-width: 1024px){ 

    .sprogWeekOverview p, .post p{ 
     margin: 12px 0; 
     font-family: Georgia, serif; 
     font-size: 16px; 
     color: #1f1f1f; 
     padding: 2px; 
    } 

}

Тег тело имеет базовую Font- размер font-size: 16px; комплект.

Любое понимание того, почему это происходит, как его исправить, и то, что я делаю неправильно, ценится. Благодарю.

источник

2016-06-15 Jem

Почему это происходит

Мобильных браузеров предположить по умолчанию, что сайт они посещают был написан для больших настольных экранов, а не для экранов мобильных телефонов. Многие макеты сайтов имеют боковую панель или что-то, что можно использовать только на больших экранах. Таким образом, мобильные браузеры имитируют более широкое окно браузера, а затем отображают его уменьшенным, чтобы все было на экране. Это масштабирование - вот почему текст небольшой. Браузеры все же позволяют вам увеличивать текст с помощью двух пальцев, если вы действительно хотите его прочитать.

Отдельно, мобильные браузеры пытаются угадать, что является самым важным текстом на странице, а затем искусственно увеличивает его размер шрифта. Этот компромисс делает текст статьи на новостных веб-сайтах, достаточно большой для чтения, без необходимости увеличивать их, при этом уменьшая размеры боковых панелей, чтобы они не занимали слишком много места. Эта инфляция размера шрифта - это то, почему заголовок «Что вы можете сделать» был уже большой в начале.

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

Как исправить

Вы можете отключить эту функцию для вашей страницы, добавляя этот тег в ваш HTML-х <head>:

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

Это говорит мобильные браузеры, которые вы испытали эту страницу на маленьких экранах и подтвердили что он остается читаемым, поэтому им не нужно пытаться автоматически адаптировать сайт для небольших экранов. Вы можете узнать больше о <meta name="viewport"> в this Mozilla article.

источник

2016-06-15 02:51:36

Я знал, что видовое окно было важно для различных вещей, а также соотношения сторон пикселей. В этом случае я не замечал этого. Что мне совершенно известно, так это то, что браузер догадывается, какой контент более важен, чем другие. Я предполагаю, что по мере того, как html5 становится все более важным, я должен использовать эти элементы для улучшения страниц макета и дать браузеру представление о том, что важно или что он смотрит? Также правильно настройте видовые экраны. – Jem

@New_Wav Нет, вы не должны пытаться создавать подсказки для браузера относительно того, какие элементы важны. Эвристика, используемая браузерами, не документируется и может меняться в любое время. Просто перейдите к использованию '', что отключает эвристику важности и дает вам полный контроль над размером текста, который должен иметь каждый элемент. –

На мобильном телефоне размер шрифта отличается в зависимости от количества абзацев

ответ

Почему это происходит

Как исправить

Смежные вопросы