Комментарии 12
Спасибо за привлечение внимания к проблеме типографики на мобильниках и планшетах.
Но, говоря про такую единицу измерения размера,как rem, уместно подчеркнуть, что IE8 не понимает её.
(А равно и Safari на iOS 3.2 не понимает.)
Но, говоря про такую единицу измерения размера,
(А равно и Safari на iOS 3.2 не понимает.)
Не знаю, нужны ли на неспециализированном сайте такие нюансы, но добавлю на всякий случай — люди с большинством видов дальтонизма читают выворотку (текст белым по черному, к примеру) гораздо хуже, чем наоборот. Ну, это кроме очевидных вещей, вроде красного шрифта на зеленом фоне. Поэтому желательно делать текст вывороткой больше и жирнее, особенно если читать там много.
Замечу, что и без дальтонизма лично мне гораздо приятнее и удобнее читать черным по белому. На компьютере это решается с помощью Evernote Clearly. На смарте/планшете порой приходится отправлять в Pocket.
А почему у дальтоников такие проблемы? Разве чёрный и белый не бесцветны для них в той же мере, в какой и для всего остального человечества? Я всегда предполагал, может быть наивно, что и чёрный, и белый, и серый цвет дальтоники воспринимают совершенно так же, как и недальтоники.
Я вам скажу как дальтоник: дальтоник — это не «видеть мир в 256 оттенках серого». Это несколько другое. Подтверждаю, читать белый по черному иногда настолько невыносимо, что приходится делать Ctrl+A, чтобы выделить весь текст (соответственно, инвертировав цвета).
Особенно это касается мобильных сайтов — если гуляя по вебу через Opera Mobile я натыкаюсь на сайты с темным фоном, просто закрываю вкладку, даже не пытаясь что-то прочитать.
Особенно это касается мобильных сайтов — если гуляя по вебу через Opera Mobile я натыкаюсь на сайты с темным фоном, просто закрываю вкладку, даже не пытаясь что-то прочитать.
Вот только проблема не с размером шрифта как таковым, а с размером самого экрана. Сайт на экране мобильного выглядит слишком мелким, штифты микроскопические.
При этом разрешение экрана вполне себе соответствует десктопам.
Т.е. завязаться именно на разрешение — идея так себе.
При этом разрешение экрана вполне себе соответствует десктопам.
Т.е. завязаться именно на разрешение — идея так себе.
Хотя, может и нет.
Проверка разрешения на моем телефоне показала:
разрешение экрана — 720 х 1280
разрешение экрана браузера — 360 х 559
Проверка разрешения на моем телефоне показала:
разрешение экрана — 720 х 1280
разрешение экрана браузера — 360 х 559
Ну совсем весело, дополнил правила вот так:
И вижу на том же телефоне синие заголовки, т.е. срабатывает min-width:960px — вот как?
@media (max-width: 640px) { body {font-size:1.5rem;} .card-title {color: red} }
@media (min-width: 640px) { body {font-size:1rem;} .card-title {color: green}}
@media (min-width:960px) { body {font-size:1.5rem;} .card-title {color: blue}}
@media (min-width:1100px) { body {font-size:1.5rem;} .card-title {color: yellow}}И вижу на том же телефоне синие заголовки, т.е. срабатывает min-width:960px — вот как?
Ссылка, указанная как калькулятор размеров шрифта, ведёт на книжный сайт: imgur.com/lGTfrBg
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
Мобильная типографика