Получите размер шрифта iPhone таким же, как в других браузерах - PullRequest
Новая
       23

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

14 голосов
/ 07 июня 2011

Давным-давно я прочитал замечательную статью , в которой описан удобный для браузера способ определения размера текста с помощью 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, вы заметите, что текст в абзаце значительно больше, чем остальная часть текста вокруг сайта. Почему этот текст выделен, и есть ли какой-то способ, которым я могу сказать, просто посмотрев на код, что это произойдет?

Ответы [ 2 ]

13 голосов
/ 10 июня 2011

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

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

..

Обычно мое решение было бы добавить -webkit-text-size-Adjust: нет; чтобы предотвратить увеличение 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, которые выглядят как вопрос доступности. Мобильное Сафари значение по умолчанию превышает 100%, что почему текст больше - так что если вы установите его до 100% вместо ни одного, шрифты остаются правильный размер на мобильном телефоне, но может все еще увеличено на рабочем столе.

0 голосов
/ 07 июня 2011

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

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

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

...