Статус партнерства с 1С-Битрикс: Бизнес партнер
  • Маркетплейс
  • Софт
  • Документация
  • Блог
  • Новости
  • Профиль
  • Удобство сайта для мобильных устройств: мелкий шрифт

    10.08.2017

    В настоящее время в ранжировании сайта во всех поисковых системах учитывается удобство сайта на мобильных устройствах. Одно из требований: отсутствие мелкого шрифта.

    Поисковики предоставляют веб-мастерам инструменты для проверки страниц. Среди прочего Яндекс сигнализирует о наличии на странице мелкого шрифта. Мелким признается шрифт менее 12px. Но у этого инструмента есть недостаток: он не сообщает где найден проблемный шрифт. На проектах с большой историей развития бывает сложно выявить быстро проблемные элементы.

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

    function readDOM (el) {
    	for (var i = 0; i < el.children.length; i++) {
    		readDOM(el.children[i]);
    	}
    	var computedStyle = getComputedStyle(el);
    	var size = parseInt(computedStyle.fontSize);
    	if (size < 12) {
    
    		console.log(el,parseInt(computedStyle.fontSize));
    	}
    }
    // Если выполняете не из консоли  необходимо обеспечить
    // чтобы вызов функции был после загрузки всей страницы
    readDOM (document.body);
    

    После этого в консоли браузера будет выведены все элементы с шрифтом менее 12px. Контекстное меню консоли позволит перейти к элементы в окне структуры HTML.

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

    small_font.png

    Все записи

    © 2001-2017 Воробьев Александр