Получите размер шрифта iPhone так же, как и другие браузеры

Долгое время я читал отличную статью, в которой описывается удобный для кросс-браузера способ по размеру текста с использованием CSS. Описанная стратегия такова:

body {
    font-size:100%;
    line-height:1.125em; /* 16×1.125=18 */
}
.bodytext p {
    font-size:0.875em; /* 16x.875=14 */
}
.sidenote {
    font-size:0.75em; /* 16x0.75=12 */
}

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

Обычно моим решением было бы добавить -webkit-text-size-adjust: none;, чтобы предотвратить увеличение размера текста в iPhone, но я недавно натолкнулся на эту статью, который описывает, что он не позволяет пользователям увеличивать текст на ЛЮБОЙ браузер Safari - явно проблема. Я знаю, что есть только CSS-решение, но я не могу его найти. Я просто хочу знать, как мне нужно устанавливать размер шрифта, чтобы они отображались одинаково во всех браузерах, включая iPhone.

Обновление. Чтобы показать пример, если вы посмотрите на this на iPhone, вы заметите, что текст в параграфе значительно больше, чем остальная часть текста вокруг сайта. Почему этот текст выделен, и есть ли способ, который я могу сказать, просто посмотрев на код, который произойдет?

Ответ 1

У вас есть техника, которой вы довольны, но с одним недостатком:

Эта стратегия отлично работает на всех браузер, кроме Safari на iPhone, который, как всегда, бит текста. Существует ли какая-либо стратегия для предотвратить это?

..

Обычно моим решением было бы добавить -webkit-text-size-adjust: none; чтобы iPhone не увеличивал размер текста, но я недавно пришел через эту статью, в которой описывается что он не позволяет пользователям увеличивать на текст в ЛЮБОЙ браузер Safari - явно проблема. Я знаю, что там это решение только для CSS, но Я не могу найти его.

Глядя на style.css из http://html5boilerplate.com/mobile/

/* Prevent mobile zooming while remain desktop zooming.
   github.com/shichuan/mobile-html5-boilerplate/issues/closed#issue/14
 */
body {
    -webkit-text-size-adjust: 100%;
        -ms-text-size-adjust: none;
}

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

Просто предложение, похоже хорошая идея установить -webkit-text-size-adjust до 100% вместо none. Установите его на noneпредотвращает масштабирование шрифтов на рабочем столе WebKit, которые выглядят как проблема доступности. Мобильные Safari's значение по умолчанию превышает 100%, что почему текст больше - так что если вы его установите до 100% вместо none, шрифты остаются правильный размер на мобильном телефоне, но может по-прежнему увеличиваться на рабочем столе.

Ответ 2

По моему опыту, использовать пиксели, а не точки, Mac и ПК отображают точки по-разному, тогда как пиксели более или менее одинаковы (если честно, всегда есть разница, но с пикселями меньше заметно).

Кроме того, line-height, к сожалению, всегда есть разница (даже между Safari и Firefox на Mac), но вы всегда можете использовать условные стили для Internet Explorer, а при необходимости использовать javascript-решения для Firefox line-height.

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