14.08.14, 23:35
0 комментарий
  Уроки

Отображаем примеры кода на мобильных устройствах

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

Фу!

Используя CSS white-space, мы можем решить проблему с оформлением кода и больше не заставлять наших посетителей с мобильных устройств «работать пальцем».

pre {
	white-space: pre-line;
}


Нам очень приглянулся PrismJS:

pre[class*='language-'], code[class*='language-'] {
	white-space: pre-line;
}


К счастью, white-space позволяет нам избежать появления горизонтального скроллинга на мобильных устройствах. Конечно же, вам нужно будет выбрать, какие media query вы хотите использовать, однако мы постараемся предоставить вам этот выбор. В некоторых случаях бывает сложно считывать код line-broken, однако это все равно в разы удобней, нежели прокручивать страницу туда-сюда.шаблоны для dle 11.2

Напишите своё мнение