Я настраиваю веб-страницу так, чтобы она выглядела хорошо на смартфонах. Я объявил раздел @media в файле CSS, поэтому я могу указать размер шрифта для этой страницы. Здесь этот раздел мультимедиа:
@media screen and (max-device-width: 640px) {
#TermsOfUse {
padding: 0 2em 0 2em;
margin-left: auto;
margin-right: auto;
color: #777;
font: small sans-serif;
}
#TermsOfUse p {
color: #777;
font-weight: bold;
font: small sans-serif;
padding-top: 1em;
padding-bottom: 1em;
}
#TermsOfUse #trademark_footer p {
font: xx-large sans-serif;
}
}
Однако размеры шрифтов отображаются непоследовательно. Я сказал, чтобы показать шрифты "маленькие", но один раздел продолжает показывать шрифты в гораздо меньшем размере (id = "trademark_footer" внизу). Использование "xx-large" даже не делает шрифт размером с "маленький" шрифт на остальной части страницы. Я просматриваю страницу в Chrome на Android.
Кроме того, когда я просматриваю эту страницу в следующем симуляторе, все шрифты на всей странице слишком малы, чтобы читать слишком мало.
Во-первых, почему шрифт в товарном знаке внизу страницы отображается намного меньше, чем шрифты на остальной части страницы (Chrome на Android)?
Во-вторых, почему все шрифты отображаются так мало в симуляторе iPhone?
Все, что я пытаюсь сделать, это показать все шрифты в разборчивом размере на всех смартфонах.
UPDATE:
Когда я указываю размеры шрифта явно, у меня такая же проблема. Если я укажу 13px, например, для основного шрифта, я должен указать что-то около 30 пикселей на товарный знак, чтобы он отображался с аналогичным размером.
То же самое, если я использую "em" s.
UPDATE:
Я только что протестировал его в браузере по умолчанию (я думаю) на своем Samsung Galaxy S2, и это показывает крошечный шрифт, слишком маленький, он неразборчив. Кстати, в браузере Adroid по умолчанию я могу дважды нажать, и он расширяется до хорошего размера.
Пробовал это, и это, похоже, не имело значения:
body {
-webkit-text-size-adjust: none;
}
Я посмотрел на источник этой страницы, и я не мог видеть
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
Когда я смотрел на свой iphone, похоже, он не масштабировал страницу вообще, предлагая, чтобы устройство интерпретировало размер страницы, и поэтому ни один из медиа-запросов не вступит в силу.
Добавление метатега viewport должно инициировать запросы к мультимедиа и изменения шрифтов, которые вы ищете.
Это длинный снимок, но он может немного помочь вам.
Я открыл http://inrix.com/traffic/Privacy с iPhone4 (iOS 5.0.1), и действительно, шрифт очень маленький.
Взгляните на страница @media (Вы также можете увидеть HTML5 Boilerplate, вы могли бы что-то отрыть оттуда тоже относительно своей проблемы). У меня нет никакой проблемы с размером шрифта, и я протестировал предыдущую ссылку на Chrome (версия 26.0.1410.64 m), iOS 5.0.1 (9A405) и Android 2.3.6 с обеих ориентаций (в телефонах). Может быть, вы могли бы что-то вырвать из этих @media s.
Я не мог больше согласиться с Векторный ответ You should specify sizes when you want consistency, вы должны избегать имен, когда хотите согласованности.
Наконец, вот несколько ссылок для дополнительной информации:
Наконец, в качестве альтернативного варианта вы можете загрузить и вставить font в свой css:
@font-face {
font-family: 'LiberationMonoRegular';
src: url('fonts/LiberationMono-Regular-webfont.woff') format('woff'),
url('fonts/LiberationMono-Regular-webfont.ttf') format('truetype');
font-weight: normal;
font-style: normal; }
Затем в ваших сбрасываниях просто используйте свой шрифт:
* { padding: 0; margin: 0; font-family: "LiberationMonoRegular", Verdana, Tahoma; }
Надеюсь, что это поможет!
Как установить высоту строки?
У меня была такая же проблема с помощью разных веб-браузеров, где шрифты имели разные позиции. Я мог бы решить это, установив height и line-height.