#iphone #html #fonts
#iPhone #HTML #шрифты
Вопрос:
Я создаю страницы html5 для загрузки на iPhone. И у меня вопрос о размере шрифта.
Например: некоторый текст имеет размер шрифта 20 пикселей. Если я загружу этот текст, размер шрифта устройства 3g, если все в порядке. Когда я загружаю ту же страницу на 4g (с более высоким разрешением) — шрифт выглядит того же размера. Я бы ожидал, что шрифт будет меньше, поскольку разрешение выше.
Могу я попросить вас объяснить это?
Спасибо
Ответ №1:
Это не совсем так работает.
Устройства в iOS имеют «масштабный коэффициент». Это количество пикселей на экране, которые соответствуют одной точке. И iPhone 3G, и iPhone 4 имеют экран размером 320х480 точек. Однако масштабный коэффициент iPhone 4 равен 2, поэтому его размер в пикселях равен 640×960.
iOS достаточно умна, чтобы понять, что если вы явно задаете размер пикселя в HTML, вы, вероятно, захотите увеличить его для отображения на сетчатке. Таким образом, размер в пикселях умножается на коэффициент масштабирования экрана (который равен 2). Ваш шрифт с 20 пикселями отображается так, как если бы это был шрифт с 40 пикселями.
Если вас особенно волнует предоставление двух разных стилей для retina и не-retina, это можно определить в мобильном safari. Смотрите здесь для получения дополнительной информации: http://blog.iwalt.com/2010/06/targeting-the-iphone-4-retina-display-with-css3-media-queries.html
Комментарии:
1. Спасибо. Применяются ли те же правила для устройств Android? Я имею в виду, если у меня размер текста 20 пикселей — будет ли он одинакового визуального размера для всех устройств?
2. Я не совсем уверен: по профессии я разработчик iOS. Я бы предположил это, но в любом случае на этой платформе гораздо больше различий в размерах.
Ответ №2:
Используйте class in в вашем теге, тогда можно задать размер текста.
#content h1 {
text-align: center;
font-size: 12px;
color: #111;
text-shadow: 0px 2px 3px #555;
font-family: 'Lobster', arial, serif;
}