Как я потратил вечер из-за клавиши CTRL

Статью можно было назвать «Уделяйте внимание даже очевидным вещам» или как-нибудь ещё. Но суть в том, что ответ на самый сложный вопрос, как правило, лежит на поверхности.

Напомню, что я занимаюсь разработкой веб-приложений, сайтов, чат-ботов и вообще всей херни, которую можно увидеть через браузер или приложение. А вот собственный сайт всё никак не соберу, вот такой я сапожник без сапог.

Сижу, значит, верстаю сайт. Именно верстаю — пишу css-стили, делаю html-разметочку, ничего не предвещало беды. Отошёл заварить кофе, прихожу — сайт не такой, как был раньше…

Выявляем проблему

Для справки — сайт делается на сетке bootstrap-5, стандартные 12 колонок. Замечаю, что элементы перестали помещаться в колонки, перескакивают на строчку вниз и занимают больше места, чем раньше. Провожу анализ, ниже пишу то, что заметил:

Элементы немного не на своих местах, некоторые не помещаются в строку, в которой раньше вполне неплохо жили.
Элементы словно чуточку больше, чем надо, хотя инспектор кода показывает, что всё в точности соответствует css-коду.
При просмотре через инструмент разработчика Google Chrome всё ок, если выставить ширину в 1920 пикселей. Агааа, понятно, куда копать дальше.
При обычном просмотре оказывается, что ширина тега body вовсе не соответствует ширине экрана в 1920 пикселей, а почему-то стала в районе 1700px

Начинаем решать

Сперва подумал — кэш. Очень частая ошибка новичков — забыть про кэширование в браузере. Вроде поменял стили, заменил картинки, а результата нет. Но хер там: даже при просмотре через инкогнито и с полной жёсткой перезагрузкой проблема сохраняется, сайт-уродец.
Проверяю в другом браузере (EDGE, вроде). Сайт открывается как надо, всё в порядке. Но проблема с отображением в Chrome меня не устраивает, едем дальше.
Начинаю проверять мета-теги (viewport, initial-scale и т. д.) — всё в порядке, значит проблема всё-таки именно в хроме.
Перезапускал и локальный сервер и другие свои проекты пробовал. На других проектах проблемы не было, на этом — сохранялась. Причём, запускаются они все по одному адресу всегда (127.0.0.1:8000).
Полез в гугл. Как только я не формировал поисковый запрос. Как только не мучал американский поисковый движок. Такой проблемы просто нет. Ну ни разу никто не сталкивался с тем, что ширина тега <body> меньше viewport’а. Меня постоянно кидало на статьи, где рекомендуют установить мета-теги и заняться прочими вещами, которые были проверены мной ещё в прошлом году.

Концовочка

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

Пошёл смотреть кино, полностью опустошённый и неудовлетворённый тем, что даже не представляю, что делать дальше.

И вдруг меня осенило — масштаб!

Оказывается, блять! Когда я просматривал какую-то картинку со своего же сайта в новой вкладке, я поигрался с масштабом (нажав тот самый CTRL и крутя колёсико мыши). А дохуя умный браузер Google Chrome запоминает масштаб для всего сайта. Он просто остался в значении 110%. Причём, сигнализирует об этом мааааленькая иконочка в адресной строке, наряду со «звёздочкой» (добавить в избранное) и какой-то ещё иконкой (вроде сгенерировать qr-код). Более того, запоминает он его качественно и надолго: не помог ни перезапуск браузера с обновлением, ни даже перезагрузка всего компьютера.

Вывод то какой?

А вывод простой: если проблема кажется овердохера сложной и необычной, не спешите забивать себе голову поиском такого же сложного решения. Лучше прервитесь на час, отпустите проблему на время. И, возможно, ваш мозг подскажет вам, что решение всё это время было перед вами.