Непоследовательные размеры шрифтов на смартфоне

Я настраиваю веб-страницу так, чтобы она выглядела хорошо на смартфонах. Я объявил раздел @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.

Кроме того, когда я просматриваю эту страницу в следующем симуляторе, все шрифты на всей странице слишком малы, чтобы читать слишком мало.

http://transmog.net/iphone-simulator/mobile-web-browser-emulator-for-iphone-5.php?u=http://inrix.com/traffic/Privacy

Во-первых, почему шрифт в товарном знаке внизу страницы отображается намного меньше, чем шрифты на остальной части страницы (Chrome на Android)?

Во-вторых, почему все шрифты отображаются так мало в симуляторе iPhone?

Все, что я пытаюсь сделать, это показать все шрифты в разборчивом размере на всех смартфонах.

UPDATE:

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

То же самое, если я использую "em" s.

UPDATE:

Я только что протестировал его в браузере по умолчанию (я думаю) на своем Samsung Galaxy S2, и это показывает крошечный шрифт, слишком маленький, он неразборчив. Кстати, в браузере Adroid по умолчанию я могу дважды нажать, и он расширяется до хорошего размера.

Пробовал это, и это, похоже, не имело значения:

body {
    -webkit-text-size-adjust: none;
}

Ответ 1

Я посмотрел на источник этой страницы, и я не мог видеть

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

Когда я смотрел на свой iphone, похоже, он не масштабировал страницу вообще, предлагая, чтобы устройство интерпретировало размер страницы, и поэтому ни один из медиа-запросов не вступит в силу.

Добавление метатега viewport должно инициировать запросы к мультимедиа и изменения шрифтов, которые вы ищете.

информация о теге видового экрана

Ответ 2

Это длинный снимок, но он может немного помочь вам.

Я открыл 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; }

Надеюсь, что это поможет!

Ответ 3

Как установить высоту строки?

У меня была такая же проблема с помощью разных веб-браузеров, где шрифты имели разные позиции. Я мог бы решить это, установив height и line-height.