—»     —»   Отображаем примеры кода на мобильных устройствах
  Раздел: Tips and Tricks   Комментариев: 1  

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



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

Используя 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, однако это все равно в разы удобней, нежели прокручивать страницу туда-сюда.
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: CSS
Опубликовал Design FactoRy   Прочитано (раз): 2763   |   Оставлено комментариев: 1
Автор перевода — CoolWebmasters.Com ©   |   Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Комментарий #1: 14 августа 2014 @ 15:20
Написал: darrow — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
Спасибо. Теперь на много удобнее. Палец отдыхает)))
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Назовите месяц February по-русски
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Популярные публикации


















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Октябрь 2017    »
ПнВтСрЧтПтСбВс
 1
2345678
9101112131415
16171819202122
23242526272829
3031