Получение правильного размера шрифта на каждом мобильном устройстве

в моем мобильном приложении я использую вид больших шрифтов, например:

<b style="font-size:100px; font-family:Segoe UI">text</b>

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

какие настройки css я должен использовать, чтобы получить одинаковый размер на каждом телефоне?

9
css font-size

5 ответов

вы должны использовать медиа-запросы для различной ширины устройства. 

@media only screen and (max-width: 768px) {
  b {
    font-size: 20px;
  }
}

@media only screen and (max-width: 320px) {
  b {
    font-size: 10px;
  }
}

и так далее...

8

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

В настоящее время мобильные телефоны подходят Ultra HD разрешения на экранах размером с ладонь, тогда как старые телефоны имели гораздо более низкую плотность пикселей.

до недавнего времени не было решения этой проблемы. Недавно CSS3 добавил поддержку того, что они называют "типографика размера видового экрана". Это позволяет установить размеры вещей относительно физического размера экрана. Это объясняется здесь.

17

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

например, iPhone 5 имеет 1136x640 физических пикселей, но с помощью панели инструментов разработчика chrome вы можете увидеть, что некоторые элементы кажутся намного больше, чем что (сказать 1300x900). Это связано с масштабированием масштабирования, которое браузеры применяют по умолчанию. В этом случае размер пикселя CSS станет намного меньше фактического размера пикселя. Представьте, что вы видите страницу размера рабочего стола в смартфоне, только намного меньше.

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

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

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

11

использовать @media запросы и установить различные шрифты для разных разрешений

пример

@media all and (max-width: 1200px) and (min-width: 800px) {
                    /* Change Resolutions Here */
  b {
    font-size: 12px;
  }
}

Хорошо Читать На Медиа-Запросы

1

кроме того, вы можете посмотреть на https://github.com/modularscale/modularscale-sass

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

кроме того, установка размеров шрифта в EMs или REMs-это путь, если вы хотите быть полностью доступным/гибким.

0