Frontend Developer
0,0
рейтинг
20 октября 2008 в 16:41

Разработка → 120 dpi и шрифты в em

CSS*
шрифт в em

Шрифты в Em/% хороши всем — возможностью пользователей IE увеличивать кегль, заботой о пользователях, что предпочитают увеличивать размер шрифта браузера по-умолчанию, чтоб лучше видеть текст, да и просто являются нормой для профессиональных верстальщиков.

Минусы: … их вроде как нет, но!
А что если у пользователя разрешение экрана выставлено не в стандартное 96 dpi, а в 120?
Сайт с увеличенными шрифтами смотрится уже не так красиво, как нарисовал дизайнер — ведь масштабируются только шрифты, а не весь сайт! А разрешение 120dpi становится всё популярней, особенно на ноутбуках! Что же делать? Возвращаться к px?

Нет!

В Opera больше нет этого бага, а resolution она просто игнорирует. Зато в IE9 при наличии кода из статьи возникают баги с уменьшенным шрифтом по всему сайту. Не используйте 120dpi fix для всех браузеров, оставьте код только для IE6/7.

ВНИМАНИЕ! По состоянию на 2013 год это статья устарела и её информация полезна лишь для теоретических знаний. Не используйте код из неё на продакшене! Он более не нужен.
* В Opera больше нет этого бага и вообще она скоро будет на другом движке (Webkit).
* IE6 и 7 — уже достояние истории и их почти никто не поддерживает.
* Да и вообще сейчас мало кто верстает в EM, большинство снова использует PX ради независимости стилей (BEM-метод) в вёрстке.


Итак, конкретизируем проблему:

В Windows при разрешении экрана больше 96 dpi браузеры IE≤7 и Opera пропорционально увеличивают величину шрифта по умолчанию.


Это может вызывать неприятное искажение дизайна, как правило, на сайтах с фиксированной шириной.
Firefox и Safari/Сhrome игнорируют экранное dpi.

Резина — как задумал дизайнер:
Fluid design 96dpi

Резина – 120dpi:
Fluid design 120dpi

Фиксированная ширина — как задумал дизайнер:
Fixed design 96dpi

Фиксированная ширина – 120dpi:
Fixed design 120dpi

На резиновых макетах увеличенный кегль как правило не вызывает проблем, но на сайтах с фиксированной шириной, увеличенные буквы могут просто не вписываться в отведённые им узкие колонки. Большой кегль может смотрется некрасиво рядом с оставшейся неувеличенной графикой.

Что происходит при увеличении размера шрифта:
Как правило, увеличивается только шрифт. Ещё могут увеличиваться блоки, на которые разделён сайт (если их размеры тоже заданы в em/%), но графика не увеличивается!

Это не значит что мы должны отказаться от изменяемых размеров шрифтов!


Ведь на действительно больших мониторах, 120 dpi – не прихоть, а необходимость – плохо видно мелкий шрифт. Да и пользователь может просто захотеть увеличить размер шрифта – как на данной конкретной странице, так и вообще в настройках браузера – чтоб на всех сайтах он был крупнее.
Мы не должны обламывать людям кайф уменьшать удобство пользования сайтом. Но и сайт должен выглядеть красиво, как задумал дизайнер, ведь встречают по-одёжке.


С помощью CSS мы можем проверять разрешение пользователя и пропорционально уменьшать размер шрифта!


html {font-size: 68.75%} /* базовый шрифт 11px */
@media all and (min-resolution: 120dpi) {
    html {font-size: 55%} /* пропорционально уменьшаем кегль: 68.75/(120/96) */
}

Для IE6/7 нужен такой код:
#header {
  scrollbar-track-color:expression(
  this.runtimeStyle.scrollbarTrackColor = "#fff",
  ((screen.deviceXDPI/screen.logicalXDPI) == 1) ? (document.body.style.fontSize = 1/(screen.logicalYDPI/96) +'em') : false
  );
}
Это одноразовый 1 expression, он изменяет базовый кегль пропорционально dpi экрана.

Разберём его поподробнее:
#header – здесь может быть id любого существующего в верстке блока. Он нам нужен только чтоб «зацепиться», сам expression изменяет стили для body.

scrollbar-track-color – любое свойство которое «не жалко». Я использую проприентарное свойство IE, из семейства задающих цвет полос прокрутки. Если у элемента нет полос прокрутки (т.е. значение overflow — visible (по умолчанию) или hidden), то это свойство никак не влияет на отображение блока.

screen.deviceXDPI2 – фактическое dpi экрана в браузере.
screen.logicalXDPI3 – стандартное dpi экрана (как выставлено в винде, обычно =96)
Как правило screen.deviceXDPI == screen.logicalXDPI. Но бывают исключения, о них ниже.

IE6/7 могут пропорционально увеличивать масштаб на экранах с высоким разрешением.


За это отвечает свойство HKEY_CURRENT_USER\Software\Microsoft\Internet Explorer\Main\
UseHR = dword:00000001

MSDN4 как бы говорит нам, что изготовители мониторов с высоким разрешением могут выставлять этот параметр.

Выглядеть это должно так:

IE с включенным увеличением масштаба (UseHR = 1):
IE с включенным увеличением масштаба
IE с выключенным увеличением масштаба (UseHR = 0):
IE с выключенным увеличением масштаба

Мне не удалось добиться масштабирования путём включением этой опции, тем не менее, я перестраховываюсь и проверяю коэффициент масштаба IE и только если он равен 1 (т.е. масштабирование выключено) пропорционально изменяю кегль для body:
document.body.style.fontSize = 1/(screen.logicalYDPI/96) +'em'
Изменение размера шрифта для body автоматически (по каскаду) изменяет кегль всех остальных шрифтов.

IE 5, к сожалению, не поддерживает screen.deviceXDPI/screen.logicalYDPI, поэтому в нём этот код не сработает.

Что насчёт IE8?


В IE8 всё сделано очень красиво и элегантно: браузер увеличивает всё содержимое страницы пропорционально экранному dpi5.
Fluid design IE8 120dpi
96dpi 120dpi 144dpi
IE8 dpi scaling at 96dpi IE8 dpi scaling at 120dpi IE8 dpi scaling at 144dpi
Т.е. автоматически включается Full-page zoom.

Лирическое отступление про screen.deviceXDPI, screen.logicalXDPI и Page zoom


В IE8 при включении Full-page zoom меняется значение screen.deviceXDPI. При 125% zoom оно = 120, при 150% — 144. При 100% (без масштабирования) screen.deviceXDPI возвращается к 96. При этом не имеет значения какое dpi стоит в винде.

Вот для чего нужна проверка что (screen.deviceXDPI == screen.logicalXDPI)!
Это случай — когда юзер в правом нижнем углу IE8, кликает на select Page zoom и меняет его.

А вот screen.logicalYDPI в 8-ке видимо постоянное число, у меня в тестах оно всегда было 96.

В 7-ке же и 6-ке, оба эти значения, при тестах, менялись только в зависимости от настроек винды. Page zoom в IE7 не менял значения ни того, ни другого свойства.

Я случайно обнаружил это через год после написания статьи, когда писал костыль к древнему сайту :)


Кстати Page zoom в IE8 лучше чем в IE7:


IE7 Full-page zoom:
Full page zoom IE7
IE8 Full-page zoom (Adaptive Zoom):
Full page zoom IE8

Горизонтальный скролл теперь появляется только если колонки имеет фиксированную ширину, переносы строк вставляются в новые места (после масштабирования), в общем очень похоже на то как это происходит в FF и Opera.
Механизм называется Adaptive Zoom, подробнее о нём можно почитать в блоге разработчиков IE6.


В IE6/7 похожего поведения можно добиться так:


div#header {
  scrollbar-track-color:expression(
  this.runtimeStyle.scrolbarTrackColor = "#fff",
  (((screen.deviceXDPI/screen.logicalXDPI) == 1) && (screen.deviceYDPI > 96)) ?
    (
     document.body.style.fontSize = 1/(screen.logicalYDPI/96) +'em',
     document.body.style.zoom = screen.logicalYDPI/96
    ) : false
  );
}

120 dpi css-zoom IE6/7:
CSS zoom in IE6/7 at 120dpi

Это не тоже самое что 125% full-page-zoom IE7:
125% full-page zoom in IE7

Full-page Zoom в IE7 увеличивает весь html (за счёт чего и появляется горизонтальный скролл), а через css мы можем задать css zoom только для body.

При css-zoom не возникает горизонтального скрола, который есть в IE7 при full-page-zoom, но появляются проблемы с флеш-объектами: они могут исчезать и проявляться частично при наведении курсора мыши, отрисовываться «скомканными».
Flash breaks at CSS zoom in IE6/7

Если у вас не используются объекты типа flash – вы можете использовать такой способ.

Любопытно, это редкий случай применения css свойства zoom по-назначению, а не для задания Layout.


Как насчёт Firefox 3.1, который понимает CSS3 Media Queries?


Для уменьшения кегля на 120dpi мы используем CSS3-свойство min-resolution.
Firefox 3.1 будет понимать и применять его. Но при этом он не увеличивает размер шрифта. Значит шрифт в нём будет меньше чем надо:
small font-size at FF3.1

Исправляем:
html {font-size: 68.75%} /* базовый кегль 11px==1em, все остальные наследуют значение = 11px x Xem */
@media all and (min-resolution: 120dpi) {
    html {font-size: 55%}
    html, x:-moz-any-link {font-size: 68.75%}
}

x:-moz-any-link – это выбор несуществующего элемента x с псевдоклассом -moz-any-link. Такой псевдокласс понимает только Gecko-браузеры, остальные проигнорируют всю строчку7.

Необычный глюк в Opera 9 (<9.6)

После того, как мы добавили фикс для FF3.1, Opera стала игнорировать css-объявление, следующее сразу за правилом для min-resolution: 120dpi.
Т.е. имеем следующий код:
html {font-size: 68.75%}
@media all and (min-resolution: 120dpi) {
    html {font-size: 55%}
    html, x:-moz-any-link {font-size: 68.75%}
}

body,table,input,label,textarea,button,select {color: #000; font: normal 1em/1.3 Tahoma, Geneva, sans-serif}
Правило, начинающееся с body будет проигнорировано в Opera 9.
Причём в Opera 8 и 9.6 — всё отлично.

Исправляем:
html {font-size: 68.75%} /* базовый кегль 11px==1em, все остальные наследуют значение = 11px x Xem */
@media all and (min-resolution: 120dpi) {
    html {font-size: 55%}
    html, x:-moz-any-link {font-size: 68.75%}
}
    #for-opera927 {/* dont' remove! */}


Приводить или нет внешний вид сайта на 120dpi к 96 – решать вам

Повторюсь — речь о стартовом виде сайта.
Пользователь с экранным разрешением 120dpi видит большинство сайтов точно так же как и на 96 (т.к. большинство свёрстанно с фиксированными размерами). А свёрстанный в em — увидит сразу увеличенным. Причём увеличенным там будет только размер шрифта, а графика останется такой же как и была. Согласитесь — сайт будет не так красив, как его изначально задумал дизайнер.

Так почему бы не показать его пользователю таким, каким он был задумал?
Увеличить размер шрифта на нём он может в любую секунду.

Кстати не факт, что пользователь сам выставил 120dpi.
Он мог просто купить ноутбук, где такие настройки по-умолчанию.

А если пользователь увеличил базовый размер шрифта в FF или Safari (которые игнорирует dpi), чтоб лучше видеть?
Без фикса сайт с em будет иметь огромный шрифт.
И только в IE8 сайт будет красиво и корректно отмасштабирован.

Как насчёт future proof? Не будет ли проблем с будущими версиями браузеров?


В ближайшее время возникновение проблем маловероятно.
Исправления потребуются только в следующих случаях:
  • Safari начнёт понимать CSS3 свойство min-resolution, но не будет увеличивать кегль в зависимости от экранного dpi.
    В это случае мы дополним код правилом аналогичным тому, что мы написали для FF3.1.

  • Internet Explorer 9 начнёт понимать min-resolution, сохранив ту же модель масштабирования (adaptive full-page zoom) что и в IE8.
    Это исправляется фиксом для IE≥9 через conditional comments8.

  • Opera, вместо увеличения размера шрифта на высоких dpi, начнёт применять full-page zoom.
    Лечится правилом аналогичным тому, что мы написали для FF3.1.

Итак вот готовое решение:


html {font-size: 68.75%} /* сюда пишем размер вашего шрифта по-умочанию */
@media all and (min-resolution: 120dpi) {
    html {font-size: 55%} /* пропорционально уменьшаем кегль: 68.75/(120/96) */
    html, x:-moz-any-link {font-size: 68.75%} /* тут должен быть размер по-умолчанию */
}
    #for-opera927 {/* dont' remove! */}

Для IE6/7:
#header {
  scrollbar-track-color:expression(
  this.runtimeStyle.scrollbarTrackColor = "#fff",
  ((screen.deviceXDPI/screen.logicalXDPI) == 1) ? (document.body.style.fontSize = 1/(screen.logicalYDPI/96) +'em') : false
  );
}

UPD: Opera 10.5+ почему-то не реагирует на правило @media all and (min-resolution: 120dpi) { ... } хотя в доках наоборот — написано что только в presto 2.5 появилась его поддержка, а раньше не было (как же работало тогда раньше?). Я пробовал разные варианты, гуглил, искал на форуме Opera, но ничего не нашёл/не помогло.Судя по спеке — в моём коде всё верно.Обсудив с pepelsbey пришли к выводу что это глюк, баг-репорт отправлен. Теперь остаётся ждать пока Opera исправит. К счастью, на западе, где проблема 120dpi распространена, почти нет Opera, а у нас, где Opera популярна, почти нет проблемы 120dpi :)
UPD2: Со слов pepelsbey Opera более не поддерживает min-resolution так что код внутри основного css стоит просто выключить. Можно оставить код для IE6/7.


Примечания:
  1. Павел Корнилов: Тонкий CSS для Internet Explorer (expression)
  2. MSDN: deviceYDPI Property
  3. MSDN: logicalYDPI Property
  4. MSDN: Adjusting Scale for Higher DPI Screens
  5. MSDN: Making the Web Bigger: DPI Scaling and Internet Explorer 8
  6. MSDN: Internet Explorer 8 and Adaptive Zoom
  7. Cогласно спецификации CSS2 браузер обязан игнорировать стиль, если в селекторе встречается что-то незнакомое
  8. MSDN: About Conditional Comments
Подробнее про то, что такое dpi:
  1. Ководство: § 70. Разрешение экранов. И немного о происхождении 72 точек на дюйм
Ihor Zenich @Delka
карма
106,2
рейтинг 0,0
Frontend Developer
Реклама помогает поддерживать и развивать наши сервисы

Подробнее
Реклама

Самое читаемое Разработка

Комментарии (65)

  • +2
    отдельный плюс за одноразовый expression
  • –3
    Картинки не грузятся
  • –2
    Какой-то кошмар. Если верстаете в Em, то и рассчитывайте на увеличение разрешения — для этого Em и предназначены. Другие размеры задавайте тоже в Em, для этого они и сделаны.
    • +1
      А как насчёт картинок, особенно которые в CSS-Sprites?
  • 0
    За решение с zoom спасибо, раньше не приходило в голову, что им можно пользоваться по назначению.
    А вообще, действительно, проще все размеры задавать относительно размера шрифта (в em) и макет страницы проектировать изначально зависимой от размера шрифта. Разница в размерах мониторов становится все больше.
    • 0
      Это само собой.
      Конечно же пользователь должен иметь возможность увеличить размер шрифта и масштабироваться должны не только шрифты, но и содержащие их блоки.

      Речь о стартовом виде сайта.
      Пользователь с экранным разрешением 120dpi видит большинство сайтов точно так же как и на 96 (т. к. большинство свёрстанно с фиксированными размерами). А свёрстанный в em — увидит сразу увеличенным.
      Согласитесь — он будет не так красив, как его изначально задумал дизайнер.

      Так почему бы не показать его ему таким, как он его задумал?
      Увеличить его он может в любую секунду.

      А если он увеличил базовый размер шрифта в FF или Safari (которые игнорирует dpi), чтоб лучше видеть?
      Без фикса сайт с em будет иметь огромный шрифт.

      В IE8 же сайт будет красиво и корректно отмасштабирован.
  • +6
    > как сделать сайт одинаковым на 96 dpi и 120
    Зачем??? Пользователь выбрал размер, который удобней.
    • –1
      Пользователь с экранным разрешением 120dpi видит большинство сайтов точно так же как и на 96 (т. к. большинство свёрстано с фиксированными размерами).

      А если он увеличил базовый размер шрифта в FF или Safari, чтоб лучше видеть, то без фикса сайт с em будет иметь огромный шрифт.

      Опять таки — это критично далеко не для всех сайтов.
      На просторных резиновых макетах, разница не так бросается в глаза (кроме картинок, что остаются такими же маленькими).

      Стоит или не стоит — решать вам, в зависимости от того как выглядит макет.
  • +8
    Просто не нужно рассчитывать, что две строки из четырех слов уместятся на вашей красивенько нарисованной псевдотрехмерной кнопке (nothing personal, я чисто гипотетически). У меня вот шрифт увеличен. А то еще белым по такому напишут, а текст уйдет неизвестно куда.

    Совершенный идиотизм — это кнопка «Выйти» (текстовый линк!) на Одноклассниках, которую частенько видно, только если нажать контрол-А.

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

    Как-то так.
    • +2
      >>Хотите красиво — пишите текст в графическом редакторе. Хотите юзабилити — забейте на градиенты и кружочки, пишите по одноцветным плашкам, в роли которых должны выступать свободно растягивающиеся слои или ячейки.

      Золотые слова!
    • 0
      «Выйти» на Одноклассниках меня также раздражали, пока я не увидел, что под Win все браузеры его показывают нормально :)
    • 0
      Можно сверстать и масштабруемо. По крайней мере, +2 от базового размера шрифта точно.
  • +1
    > На резиновых макетах увеличенный кегль как правило не вызывает проблем, но на сайтах с фиксированной шириной, увеличенные буквы могут просто не вписываться в отведённые им узкие колонки.

    Не нужно с white-space: nowrap извращаться.
    • +1
      Соглашусь что имея достаточно времени верстальщик может вылизать макет так, что даже двукратное увеличения кегля не сделает его некрасивым (то что он в любом случае должен быть аккуратным и читабельным при увеличении — это самом собой).

      Но далеко не всегда бюджет и сроки предусматривает такой перфекционизм.
      Ещё бывают вредные макеты, которые красиво ну никак не увеличишь. т. е. будет читабельно, но «неаккуратненько». На последние 10% работы тратится 90% времени.

      Опять таки заказчик может задаться вопросом — «а почему на моём ноутбуке все сайты смотрятся нормально, а тот, что вы мне сделали — какой-то уродский»?
  • 0
    в мемориз! спасибо.
  • +1
    Сам пока не сталкивался с такой проблемой, но теперь статья в закладках!
    Очень подробная и понятная статья, спасибо!
  • НЛО прилетело и опубликовало эту надпись здесь
    • +2
      У них таких проблем особо не возникает, поскольку вся верстка резиновая и с минимумом графики.
    • 0
      Почитайте Виталия Харисова
  • +2
    просто нереально обстоятельно и подробно =)
  • 0
    Недавно столкнулся с проблемой расползания дизайна на 120 DPI — ntgthm знаю, что можно поправить. Спасибо!
  • 0
    пинтагон — это пять :)
  • +1
    Друзья мои, это хорошо и полезно, когда выхода нет. Но на мой взгляд, человек для того и ставит 120 dpi, чтобы видеть шрифты соответствующих размеров. Почему бы не постараться делать сайты, на которых шрифты можно безболезненно масштабировать?

    А статья хорошая.
    • 0
      По-хорошему, если человек ставит 120dpi он хочет видеть всё больших размеров — не только шрифты но и графику. Увы, пока только IE8 пропорционально увеличивает весь сайт на высоких dpi.
  • НЛО прилетело и опубликовало эту надпись здесь
  • 0
    меня подход пугает относительной сложностью, возможнгыми проблемами с будущими версиями браузеров и нелогичностью, если пользователь меняет dpi почему мы должны с этим бороться?
    • 0
      меня подход пугает относительной сложностью

      что именно непонятно как делать? я постараюсь расписать подробнее, чтоб было легче.

      возможнгыми проблемами с будущими версиями браузеров и нелогичностью, если пользователь меняет dpi почему мы должны с этим бороться?

      дополнил статью, в самом конце — ответы на эти вопросы.
  • 0
    почему бы все остальные размеры тогда не задать в том же em?
    • 0
      А мы и так задаём!
      Но графика-то не увеличивается :(
  • НЛО прилетело и опубликовало эту надпись здесь
    • 0
      не совсем понял — вам не нравится идея full page zoom или качество увеличения при нём?
      • НЛО прилетело и опубликовало эту надпись здесь
  • 0
    очередное задротсво с емами, да чтож такое! хотя признацо было очень интересно почитать :)

    html, x:-moz-any-link {font-size: 68.75%} насколько мне не изменяет память прочитают все (но перебить для фф2/3 им можно), ибо тут нет ничего такого почему его нельзя прочитать
    • 0
      для не-Gecko браузеров x:-moz-any-link — неккоректный селектор, а весь оператор должен быть проигнорирован, если где-либо в селекторе имеется ошибка, даже если остальная часть селектора выглядит как соответствующая CSS2.
  • –1
    Проблема касается только сайтов с фиксированой шириной. Фиксированя ширина это ошибочная верстка. Эсли кто-то не согласен посмотрите Яндекс, Google, W3C.org, MSDN — нигде нет фиксированой ширины.
    Просто надо верстать правильно, без фиксированой ширины и проблем не будет.
    • НЛО прилетело и опубликовало эту надпись здесь
  • +1
    как бы говорит нам
  • НЛО прилетело и опубликовало эту надпись здесь
    • 0
      это WebSlices — первое встроенное в браузер использование микроформатов.

      Если на сайте используется микроформат hSlice, на панели инструментов браузера появляется такая зелёненькая пиктограмка и она же с зелёной рамочкой появляется при наведении курсора на блок на страничке, размеченный как WebSlice.

      Типа такого:


      Можно кликнуть или по иконке на панели, или по самому блоку и браузер подгрузит его содержимое на ссвою панель и будет и регулярно обновлять его:


      На хабре есть неплохая статья про их использование: WebSlices в Internet Explorer 8.0
  • 0
    Спасибо, возьму на вооружение.
  • 0
    Буду рад дополнениям — есть-ли такая проблема под Mac/Linux.
  • 0
    Вообще-то имхо я считаю что сайты должны быть резиновые.
    Фиксированные сайты имеют место на жизнь, но должны использоваться очень редко, ну нельзя под всех сделать фиксированный сайт, поэтому когда его делаете будьте гтовы к тому что многие юзеры его увидят совсем не так как задумано.
  • 0
    Статья довольно интересна. Автор пытается подбирать размер шрифта в зависимости от разрешения монитора. И выставить «дизайнерский» размер шрифта в браузерах с увеличенным масштабом.
    Лично для меня это второй этап.
    А первый этап — установление кроссбраузерности относительного размера шрифта.
    Проблема! Я:
    — обнулил CSS (html{font-size:100.01%;}),
    — указал размеры шрифтов в em (body{font-size:0.625em;}),
    — выставил дефолтный размер шрифта/масштабирования в 3-х браузерах,
    — снял скриншоты страниц браузеров
    — в графическом редакторе стал сравнивать размеры шрифтов.
    К сожалению размеры шрифтов в браузерах отличаются.
    ГУРУ, Вы знаете какой-нибудь CSS хак, который будет приводить физический размер шрифта браузеров к единому знаменателю?
    Иными словами:
    Я хочу узнать как сделать так, чтобы физическая высота (в см) 1 em во всех браузерах, установленных на одном PC с одними и теми же разрешением монитора и установками ОС, была постоянна.

    PS: Прошу Вас огалтело не минусовывать меня — я только учусь :)
    • 0
      а межстрочный интервал (line-height) вы указали?
      • 0
        body{
        width:100%;
        font-size:0.625em; /* Resize text to 1em — 10px */
        line-height:1;
        font-family: Verdana, Arial, Helvetica, sans-serif;
        color:#000;
        background-color:#fff;
        }

        Кажется из Эрика скопипастил…
      • 0
        Чтобы не было недопонимания, раскрою конфигурацию:
        — ОС Vista
        — Размер шрифта 130dpi
        — FF 3.0.3
        — IE 7.0.6
        — Opera 9.52
        • 0
          в разных браузерах разный механизм сглаживания, 1:1 всё равно не получится, да и стоит-ли?
          пользователю наплевать на то что условно говоря — высотка строки текста в IE на один пиксель больше чем Firefox.

          Ни один нормальный пользователь не будет сравнивать как выглядят страницы одного и того же сайта в разных браузерах попиксельно!

          Сильно большие различия?
          Если пару пикселей — постарайтесь убедить заказчика что он желает ненужного.
          pepelsbey вообще рекомендовал уходить от заказчиков, что желают пиксель в пиксель.
          Пиксель в пиксель — это на флеше :)
          • 0
            Различия к сожалению не 1 пиксел, а поболее будет (Большой заголовок — название сайта).
            Интересуюсь для себя, не кОрысти ради :)
            Так что уйти от себя не получится :)

            Однако, пришла мысль:
            1. Предположим, что мы можем узнать разрешение экрана — в статье про это рассказывается.
            2. Тогда мы можем понять, сколько пикселов помещается в дюйме.
            3. В зависимости от разрешения выставляем body размер в пикселах (px). А лучше всего даже считать по формуле.

            В результате на Веб странице мы будем оперировать метрическими размерами (через em).

            Я провел эксперимент, поставив body{font-size: 10px;}.
            Размер шрифтов в браузерах примерно сравнялся (остались различия, которые можно списать на сглаживание шрифтов). Попробовал масштабирование — оно работает.

            Может стоит в Ваш метод включить данный способ «ластика»?
            • 0
              не совсем понял — задача стоит показывать заголовок определённым физическим (в дюймах) размером?
              и проверять именно разрешение (типа 1024х768 и т. п.) а не dpi экрана?
              • 0
                Задача стоит так:
                Выводить на экран шрифты и картинки определенным физическим размером (в дюймах).
                Таким образом мы отдадим должное дизанеру, чей дизайн будет одинаково показываться на разных мониторах с разным разрешением.
                Но в то же время, пользователь должен иметь возможность увеличить размеры шрифтов и картинок по своей надобности.
                Я думаю, что эту задачу можно решить, если установить начальные значения в px, а все остальные в em.
                Но так как разрешения экранов (px на дюйм) величина не постоянная, то начальные значения (px) необходимо вычислять, задействовав хинты, типа screen.deviceXDPI, screen.logicalXDPI (а это уже Вам виднее как вычислить)
                • 0
                  а зачем?

                  ведь мониторы-то у всех разные — для кого-то будет слишком мелко, для кого-то наоборот.
                  • 0
                    Так нужно вычислить количество начальных px для каждого монитора (вытащив каким-то образом разрешение отображающего девайса), чтобы на каждом конкретном мониторе (которые с разными разрешениями) размер шрифта составил заданные дюймы (сантиметры), если к монитору приложить линейку.
                    • 0
                      ну идея понятна, а смысл?
                      ведь мониторы-то разного размера, на маленьком мониторе например это будет слишком крупный шрифт.

                      пользователям будет неудобно читать.
                      • 0
                        Это спорное утверждение.
                        Посмотрим в сторону Vista:
                        Мы видим, что пользователь в системе может самостоятельно указать разрешение устройства.
                        Например, у меня устройство имеет реальное разрешение 100 dpi. У меня плохое зрение и я решил сделать буквы побольше — я указал заведомо ложное разрешение в 130 dpi, тем самым увеличив шрифт.
                        Возможна и другая ситуация — маленький экран, в который ничего не вмещается, вынудит пользователя поставить разрешение 72dpi.
                        Это механизм умещения информации в площадь отображения, которым управляет пользователь.

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

                        Но изначальная идея была не в том, чтобы отображать шрифт в натуральную величину (эту идею было проще объяснить), а в том, чтобы заставить браузеры на конкретном устройстве показывать одинаково шрифт! Чтобы одна и та же верстка во всех браузерах умещалась в отведенные поля :)

                        Единообразное отображение шрифтов можно реализовать, например, привязав во всех браузерах размер шрифта к физическим размерам (масштабом которых в свою очередь управляет пользователь).
  • +1
    ВАЖНОЕ ДОПОЛНЕНИЕ: ФИКС ГЛЮКА В OPERA 9!

    После того, как мы добавили фикс для FF3.1, Opera стала игнорировать css-объявление, следующее сразу за правилом для min-resolution: 120dpi.
    В Opera 8 и 9.6 — всё ок.

    Прблема схожа с safari 3.0.4 и @charset «utf-8»;

    Статья дополнена исправлением для Opera 9.
  • 0
    Огромное спасибо за этот пост. Никогда не копал последние селекторы CSS подробно, поэтому способ с min-resolution упустил :)
    Только не очень понял… что это? #for-opera927 {/* dont' remove! */}
    • 0
      После того, как мы добавили фикс для FF3.1, Opera стала игнорировать css-объявление, следующее сразу за правилом для min-resolution. Поэтому я добавил сразу после этого блока пустое правило: #for-opera927 {/* dont' remove! */}, незадающее никаких стилей никаким элементам (элемента с id «for-opera927» — нет).

      Т. е. это строка «на убой» чтоб Opera 9 его съела (проигнорировала), а нужные правила (за ним) уже выполняла.

      В статье про это есть абзац «Необычный глюк в Opera 9 (<9.6)».
      • 0
        А, теперь понял. Спасибо еще раз :)
  • 0
    Потрясающая статья. Эталон.
  • +1
    Лирическое отступление про screen.deviceXDPI, screen.logicalXDPI и Page zoom
    В IE8 при включении Full-page zoom меняется значение screen.deviceXDPI. При 125% zoom оно = 120, при 150% — 144. При 100% (без масштабирования) screen.deviceXDPI возвращается к 96. При этом не имеет значения какое dpi стоит в винде.

    А вот screen.logicalYDPI в 8-ке видимо постоянное число, у меня в тестах оно всегда было 96.

    В 7-ке же и 6-ке, оба эти значения, при тестах, менялись только в зависимости от настроек винды. Page zoom в IE7 не менял значения ни того, ни другого свойства.

    Я случайно обнаружил это через год после написания статьи, когда писал костыль к древнему сайту :)


    статья обновлена :)
    • +1
      т.е. проверка что (screen.deviceXDPI == screen.logicalXDPI), про которую я писал что она нужна «на всякий случай» — таки не зря!

      Этот случай — когда юзер в правом нижнем углу IE8, кликает на select Page zoom и меняет его.
  • 0
    Случайно обнаружил что Opera 10.5 почему-то не реагирует на правило
    @media all and (min-resolution: 120dpi) { ... }

    хотя в доках наоборот — написано что только в presto 2.5 появилась его поддержка, а раньше не было (как же работало тогда раньше?).

    Буду разбираться, как доберусь до рабочего компа.
    • 0
      так и не смог разобраться :(

      Пробовал разные варианты, гуглил, искал на форуме Opera, ничего не нашёл/не помогло.
      Судя по спеке — всё верно.

      Призвал на помощь pepelsbey, о результатах доложу :)
      • 0
        Пришли к выводу что это глюк, баг-репорт отправлен. Теперь остаётся ждать пока Opera исправит. К счастью, на западе, где проблема 120dpi распространена, почти нет Opera, а у нас, где Opera популярна, почти нет проблемы 120dpi :)
  • 0
    Судя по всему опера в последних версиях снова увеличивает шрифты при dpi>96.

Только зарегистрированные пользователи могут оставлять комментарии. Войдите, пожалуйста.