Прыгающий контент при загрузке страницы, мерцающий экран при скролле или блоки, которые «разъезжаются» на мобильных устройствах — чаще всего это следствие некорректной работы JavaScript с размерами окна и viewport. Запрос «js screen fix» обычно означает именно это: разработчик ищет способ стабилизировать отображение интерфейса через скрипты.
В этой статье разберём основные сценарии проблем с экраном в веб-приложениях: от неправильного вычисления высоты viewport на мобильных браузерах до мерцания при ресайзе окна. Для каждого случая приведём безопасный код, который можно адаптировать под свой проект.
Типичные симптомы проблем с экраном в JS
Прежде чем что-то чинить, определите, какая именно проблема проявляется. Симптомы часто выглядят похоже, но причины у них разные, и универсального фикса не существует.
- 📱 Скачущий layout — элементы меняют позицию после загрузки страницы или при скролле
- 🔄 Мерцание при ресайзе — контент дёргается при изменении размера окна браузера
- 📏 Неверная высота на мобильных — блок с
100vhперекрывается адресной строкой браузера - 🖥️ Размытие на Retina/HiDPI — canvas или изображения выглядят нечётко на экранах с высокой плотностью пикселей
Каждый из этих симптомов имеет собственную диагностику. Ниже разберём их по отдельности, начиная с самой частой проблемы — viewport на мобильных устройствах.
Проблема 100vh на мобильных браузерах
Классическая ситуация: вы задаёте секции высоту 100vh, на десктопе всё идеально, а на телефоне нижняя часть контента прячется за панелью браузера. Причина в том, что мобильные браузеры включают в vh область, которую занимает адресная строка.
Надёжный фикс через JavaScript — вычислить реальную высоту окна и записать её в CSS-переменную:
function setRealViewportHeight() {
const vh = window.innerHeight * 0.01;
document.documentElement.style.setProperty('--vh', vh + 'px');
}
setRealViewportHeight();
window.addEventListener('resize', setRealViewportHeight);
После этого в CSS вместо height: 100vh используйте height: calc(var(--vh, 1vh) * 100). Значение --vh будет соответствовать фактической видимой области, а не теоретической.
⚠️ Внимание: в современных браузерах появились CSS-единицыsvh,lvhиdvh, которые решают эту проблему без JavaScript. Если ваш проект не требует поддержки устаревших браузеров, сначала проверьте, подходит ли вам100dvh— это проще и надёжнее скриптового решения.
Мерцание и дёрганье при ресайзе окна
Если при изменении размера окна элементы перерисовываются рывками, вероятная причина — обработчик resize выполняет тяжёлые вычисления на каждое событие. А событий браузер генерирует десятки в секунду.
Решение — debounce: отложить выполнение до тех пор, пока пользователь не закончит менять размер окна.
let resizeTimer;
window.addEventListener('resize', function() {
clearTimeout(resizeTimer);
resizeTimer = setTimeout(function() {
// ваши пересчёты layout здесь
recalcLayout();
}, 150);
});
Задержку в 150–250 мс можно подобрать под свой интерфейс. Слишком маленькая не даст эффекта, слишком большая будет ощущаться как «задумчивость» страницы.
Скачки контента при загрузке (CLS)
Когда скрипт вставляет или меняет элементы после того, как пользователь уже видит страницу, возникает cumulative layout shift — контент «уезжает» из-под курсора. Это не только раздражает, но и ухудшает метрики сайта.
Что проверить в первую очередь:
- 🖼️ У изображений и iframe заданы атрибуты
widthиheight— тогда браузер резервирует место до загрузки - 📦 Динамические блоки (баннеры, виджеты) вставляются в контейнер с заранее заданной минимальной высотой
- ⏱️ Скрипты, меняющие DOM, не выполняются с задержкой через
setTimeoutпосле отрисовки - 🔤 Веб-шрифты не вызывают перестроение текста — проверьте
font-display: swapи поведение при подмене шрифта
Размытый canvas на экранах с высокой плотностью пикселей
На экранах Retina и подобных один CSS-пиксель соответствует нескольким физическим. Если рисовать в canvas без учёта devicePixelRatio, изображение будет размытым.
Исправление — масштабировать размер буфера canvas относительно коэффициента плотности:
const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');
const dpr = window.devicePixelRatio || 1;
const rect = canvas.getBoundingClientRect();
canvas.width = rect.width * dpr;
canvas.height = rect.height * dpr;
ctx.scale(dpr, dpr);
После этого все координаты рисования указывайте в CSS-пикселях — масштабирование сделает свою работу. Без умножения на devicePixelRatio canvas физически не может выдать чёткую картинку на HiDPI-экране, никакие CSS-фильтры этого не исправят.
Почему нельзя просто задать canvas.style.width?
CSS-размер растягивает уже отрисованный буфер, как растягивается картинка. Физическое разрешение буфера при этом не меняется, поэтому чёткость не появляется — нужно увеличивать именно canvas.width и canvas.height.
Сравнение подходов к фиксу экранных проблем
Соберём рассмотренные методы в одну таблицу, чтобы было проще выбрать подходящий.
| Проблема | Метод исправления | Нужен ли JS |
|---|---|---|
| Высота 100vh на мобильных | CSS-переменная --vh или единица dvh | Только для старых браузеров |
| Мерцание при ресайзе | Debounce обработчика resize | Да |
| Скачки контента (CLS) | Резервирование места под элементы | Нет, в основном CSS/разметка |
| Размытый canvas | Масштабирование по devicePixelRatio | Да |
| Анимации не синхронизированы | requestAnimationFrame | Да |
Чек-лист диагностики перед исправлением
Прежде чем внедрять любой фикс, пройдитесь по списку — это поможет убедиться, что вы чините именно ту причину, а не маскируете симптом.
☑️ Диагностика проблемы с экраном
Если после отключения всех сторонних скриптов проблема исчезает — причина в одном из них, и чинить нужно интеграцию, а не собственный код. Включайте скрипты обратно по одному, чтобы найти виновника.
⚠️ Внимание: не копируйте «готовые фиксы» из форумов без проверки на своём проекте. Сниппеты вроде принудительного overflow: hidden на body или блокировки событий скролла могут сломать прокрутку страницы целиком, особенно на iOS.
Когда JavaScript не поможет
Не каждая проблема с экраном решается скриптами. Если мерцание наблюдается на уровне всей системы, а не только в браузере, причина может быть в драйвере видеокарты, кабеле монитора или настройках частоты обновления — и здесь JS бессилен по определению.
Также не стоит скриптами «чинить» аппаратные артефакты: полосы на матрице, битые пиксели, засветы. Признак простой — они видны даже вне браузера, например на экране загрузки системы.
Частые вопросы
Что означает запрос «js screen fix»?
Чаще всего под этим подразумевают исправление проблем отображения веб-страницы средствами JavaScript: неверные размеры viewport, скачки layout, мерцание при ресайзе, размытый canvas. Это не отдельная библиотека, а класс задач.
Замедлит ли сайт обработчик resize с debounce?
Нет, наоборот — debounce снижает нагрузку, потому что тяжёлый код выполняется один раз после завершения изменения размера, а не десятки раз в секунду.
Нужен ли JS-фикс для 100vh, если есть dvh?
Если вы не поддерживаете устаревшие браузеры, достаточно CSS-единицы dvh. Скрипт с переменной --vh остаётся запасным вариантом для старых версий. Проверьте актуальную поддержку на момент разработки.
Как проверить, есть ли у страницы проблемы со сдвигом layout?
Откройте Chrome DevTools, вкладку Performance, запишите загрузку страницы и посмотрите строку Experience — сдвиги layout подсвечиваются там отдельно. Также CLS показывают инструменты измерения Web Vitals.
Почему canvas чёткий на одном мониторе и размытый на другом?
Значение devicePixelRatio различается между экранами. Если буфер canvas рассчитан без его учёта, на дисплее с высокой плотностью пикселей картинка будет размытой. Пересчитывайте размер буфера при переносе окна между мониторами.