Перейти к содержимому

Блог

Окно шире экрана, который оно объявляет

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

Команда ARMANOS6 мин

Находится одной строкой

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

На странице, объявившей себя мобильной, окно шире экрана описывает машину, которой не бывает. Без этой строки настоящий телефон тоже раскладывается шире своего экрана, поэтому сверять стоит только после неё.

  1. 1

    Спрашивает экран

    Ширина и высота экрана, о котором сообщает браузер.

  2. 2

    Спрашивает окно

    Ширина и высота области, в которой нарисована страница.

  3. 3

    Сравнивает

    Окно больше экрана это противоречие внутри одного браузера.

Что мы замерили

Экран выводится из зерна профиля, поэтому мы разыграли 900 настольных профилей текущего поколения отпечатка и сосчитали, что вышло.

Разных экранов оказалось восемнадцать, от 1280 на 720 до 3840 на 2160. Этот разброс и есть смысл: набор из одного размера был бы приметой сам по себе.

Замерено на 900 жребияхДоля
Экранов уже или ниже, чем 1920 на 108064 процента
Экранов ниже окна в 820 точек16 процентов
Разных экранов в наборе18
Самый узкий и самый широкий1280 на 720 и 3840 на 2160

Почему числа такие

Человек работает на своём экране, а распространённый это 1920 на 1080. Развёрнутое окно займёт этот размер независимо от того, что объявляет профиль внутри.

Значит расходящаяся доля это просто доля набора, меньшая экрана перед человеком. На большем экране она выше, на меньшем ниже.

На телефоне это видно сразу

У телефонного профиля разрыв не спрятать: аппарат объявляет 360 точек в ширину, а растянутое рукой окно было бы втрое больше.

Поэтому телефонное окно делается размером с аппарат, а запомненный размер ему не возвращается. Настольный случай это то же противоречие меньшими числами.

Что с этим делает программа

Размер, с которым открывается окно, срезается по экрану, который объявляет профиль. Меньшее окно остаётся меньшим: это потолок, а не требование.

Срезается внешний размер окна, а страница читает внутреннюю область, которая всегда меньше. Запас идёт в пользу профиля.

  1. 1

    Решает одна функция

    Каждое окно профиля спрашивает размер у одного и того же кода.

  2. 2

    Объявленное это потолок

    Ширина и высота срезаются по экрану, о котором профиль сообщает.

  3. 3

    У телефона точно

    Окно аппарата равно экрану аппарата, а не просто помещается в него.

Как проверить у себя

Откройте в браузере окно разработчика и прочитайте экран и окно рядом. Сравнение занимает одну строку и ничего ставить не нужно.

Сделайте это на развёрнутом окне и на маленьком. Честно отвечающий профиль в обоих случаях даёт окно не больше экрана.

Чего это не утверждает

  • Это не утверждает, что сошедшиеся размеры делают профиль безопасным. Убрано одно противоречие из многих, а поведение, платёжные данные и история аккаунта остаются нетронутыми любым браузером.
  • Это не утверждает, что такую проверку делает каждый сайт. Кто-то делает, кто-то не смотрит вовсе, и никто из них не публикует, что именно проверяет.
  • Самопроверка внутри программы делает это сравнение у профиля с касаниями, а не у настольного. Распространение её на настольный меняет число строк, о котором программа сообщает, и потому ждёт следующей приёмки на собранном движке.
  • Числа выше описывают наш набор экранов на поколении, текущем сегодня. Другой набор даёт другие доли.

Где это можно увидеть самому

Каждое число выше выходит из кода, который можно открыть и запустить.

Экраны выводятся из зерна профиля
packages/shared/src/index.js
Размер окна профиля решается в одном месте
apps/desktop/src/lib/окноПрофиля.js
Правило исполняется на настоящих отпечатках, а не читается буквами
apps/desktop/test/окно-не-шире-экрана.js
Телефонное окно делается размером с аппарат
apps/desktop/src/lib/mobileEmulation.js · apps/desktop/src/lib/mobileWindow.js

Вопросы

Почему не выдать всем самый большой экран?
Один размер на всех это примета сам по себе, а экран, далёкий от машин, которые площадка обычно видит, выделяется и в одиночку.
Человек теряет выбранный размер окна?
Только ту часть, что выше объявленного экрана. Окно меньше экрана открывается ровно таким, каким его оставили.
Это про полноэкранный режим?
Нет. В полноэкранном окно равно экрану, а противоречие появляется, только когда окно больше объявленного профилем.
Сайт видит, как числа были срезаны?
Он читает два обычных значения и не видит, чем они получены. Видит он другое: сходятся они или нет.
Меняет ли что-нибудь прокси?
Нет. Адрес приходит со стороны, а оба этих числа рождаются на машине перед вами.

Посмотрите, что отвечает ваш браузер

Проверка читает 12 значений и никуда их не отправляет.