Как эмулировать разрешение экрана в браузере

Обновлено: 03.07.2024

На сегодняшний день тестирование страниц становиться непростой задачей. Времена, когда проверка работоспособности сайта ограничивалась парой браузеров, давно прошли.

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

Процесс тестирования также усложняется благодаря устройствам с сенсорным экраном и мониторов с высоким разрешением. Если вы ведете разработку проекта на обычном PC с помощью таких же обычных мыши и клавиатуры, то вам будет трудно оценить работоспособность вашего кода в реальных условиях (на всех вышеперечисленных устройствах). Такая возможность, как событие мыши hover может не работать и ваше приложение становиться неработоспособным. Но тогда каким же образом можно протестировать программу и избежать при этом необходимости переключения между различными устройствами?

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

Запустите установленный Chrome, откройте в нем страницу, которую хотите протестировать и откройте Developer Tools (Menu - Tools - Developer Tools, Cmd+Opt+I на Mac или F12/Ctrl+Shift+I под Windows и Linux). Кликните мышью на значке-шестеренке Settings в правом верхнем углу окна браузера, затем откройте раздел Overrides для того, чтобы включить показ эмуляции в браузере - Show Emulation view in console drawer (в версии 33 эта возможность активирована по умолчанию):

Закрываем окно Settings и открываем “Console Drawer” (это не тоже самое, что общая “Console”) - для этого кликаем мышью на иконке (расположенной слева от иконки Settings) или нажав клавишу Esc . У вас должна открыться вкладка Emulate в “Console Drawer” (если этого не произошло, перезапустите браузер Chrome):

Режим эмуляции - раздел Device

Раздел Device предоставляет несколько дюжин готовых предустановок для большинства популярных мобильных устройств, включая iPhone, iPad, Kindles, планшеты Nexus, смартфоны Samsung Galaxy и т. д. Выбор одного из устройств приводит к изменениям настроек в остальных разделах.

Выбираем из списка нужное устройство и жмем кнопочку “Emulate” внизу этого списка:

Обратите внимание! Инструкция, представленная выше, описывает включение режима эмуляции в стабильной версии v.32 браузера Chrome. Если вы используете последнюю версию браузера Chrome Canary, эта опция будет располагаться в разделе “Settings” во вкладке “General” под вкладкой “Appearance”. (прим. переводчика: кто не знает, браузер Chrome Canary - это самая свежая и нестабильная версия браузера Chrome.)

Режим эмуляции - раздел Screen

В разделе Screen можно самостоятельно установить настройки экрана эмулируемого устройства:

Resolution - произвольный размер экрана устройства
Device pixel ratio - то есть для дисплеев Retina от Apple нужно ставит 2, чтобы производилось удваивание размера объектов в области просмотра
font-scaling factor (прим. переводчика: неизвестный для меня параметр)

Режим эмуляции - раздел User Agent

В этом разделе настраивается режим агента пользователя. То есть, устанавливается модель взаимодействия между эмулируемыми клиентом и сервером:

Режим эмуляции - раздел Sensors

В этом разделе настраивается режим эмуляции сенсорного экрана:

В режиме эмуляции сенсорного экрана курсор мыши приобретает вид отпечатка пальца на экране устройства:

Эмуляция multi-touch может быть выполнена при помощи зажатой клавиши Shift и движения мыши в нужную сторону. Этот режим задействует соответствующие JavaScript-события, такие как touchstart , touchend , touchmove . Также делается попытка полностью соответствовать мобильным браузерам благодаря реализации JavaScript-события mouseover , но это событие возникает только тогда, когда будет произведено “нажатие” на элемент интерфейса. Эмулятор корректно игнорирует событие mouseover , возникающее, когда курсор сенсорного устройства просто движется поверх элемента интерфейса.

Возвращение браузера в обычный режим

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

Мне больше не нужны устройства

Рассмотренный выше эмулятор браузера Chrome является полезным инструментом, но он не может в точности реализовать поведение настоящих устройств с сенсорным экраном, во всех их тонкостях.

Стоит также обратить внимание, что эмулятор несовершенен в следующих вопросах:

вы можете столкнуть с некоторыми необъяснимыми ошибками в работе эмулятора
CSS-событие :hover все еще в действии и
для него нет механизма эмуляции; страница будет сгенерирована браузером Chrome вне зависимости от того, все ли устройства поддерживают возможности, заложенные в ней

Будем надеяться, что команда Google обратит внимание на эти недостатки и исправит их в последующих релизах.

Если подвести итог, то можно сказать, что режим эмуляции в браузере Google Chrome является простым и быстрым способом протестировать страницу, без необходимости проверки на реальных устройствах, таких как смартфоны или планшеты. Кроме того, у вас есть полный набор инструментов разработчика, что может сэкономить несколько часов вашего труда.

От переводчика

Хочется от себя немного добавить в эту тему. В книге Б. Фрейна “HTML5 и CSS3. Разработка сайтов для любых браузеров и устройств” автор приводит краткий список плагинов для тестирования страниц в различных браузерах. Эти плагины не такие “продвинутые”, как режим эмуляции в браузере Chrome. Их задача сводиться только к одному - проверке работоспособности страниц на экранах различных устройств, с разными размерами области просмотра. Цель такой проверки - создание полностью рабочего адаптивного дизайна сайта.

Для браузера Safari автор рекомендует расширение Resize или ResizeMe. Под браузер Mozilla Firefox имеется плагин Firesizer. А под браузер Google Chrome автором рекомендуется использовать расширение Windows Resizer.

Например, после установки и активизации расширения Windows Resizer под Chrome при щелчке мыши на иконке появиться окно с предустановленными размерами экранов устройств:

В дальнейших объяснениях работа с плагином не нуждается, как мне кажется.

TypeScript - размеченные объединения

> Пользовательское объединение типов - что это и как можно использоватьПомимо объединения **примитивных** типов данных (например):

Хватит менять размер окна браузера, хватит его насиловать! Готов спорить, вы не раз слышали это. Хорошо, возможно и не слышали. Но если вы профессионально занимаетесь разработкой адаптивных сайтов, вы понимаете о чем я: любое изменение DOM или правка CSS, и вы снова начинаете тянуть край браузера вперед, назад, тестируя изменения и просматривая ничего ли не сломалось.

Целью ваших движений является имитация экранов различных устройств.

В корпоративной среде зачастую, у вас есть множество гаджетов предоставленных компанией для теста. На моей работе в моем распоряжении есть iPad, iPod, другие планшеты, ноутбуки, а также настольные мониторы. Если у вас нет такой роскоши, приходится использовать то, что под рукой.

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

Am I Responsive?

Am I Responsive, очень простой инструмент, позволяющий быстро просмотреть ваш сайт на 4 устройствах. Все они — IOS и разработчик объясняет это фишкой сайта. В общем никаких настроек, никакого выбора, а очень просто и наглядно.

настольный монитор — 1600 x 992px;
ноутбук — 1280 x 802px;
планшет — 768 x 1024px;
мобильный телефон — 320 x 480px.

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

deviceponsive

deviceponsive очень похож на Am I Responsive, тем, что он настолько же прост, с минимум настроек и опций. Все доступные устройства отображаются сразу на одной длинной странице. Из всех доступных опций это возможность отредактировать фон заголовка и добавить туда свой логотип, что будет полезно когда вы решите поделится скриншотом.

Macbook — 1280 x 800
iPad портрет — 768 x 1024
iPad портрет — 1024 x 768
Kindle портрет — 600 x 1024
Kindle альбомная ориентация — 1024 x 600
iPhone портрет — 320 x 480
iPhone альбомная ориентация — 480 x 320
Galaxy портрет — 240 x 320
Galaxy альбомная ориентация — 320 x 240

responsive test

Как и deviceponsive, responsive test отображает ваш сайт в различных устройствах. Но вместо показа всех сразу, вы сами выбираете необходимое устройство в верхнем меню страницы. Кстати тут корректно работает масштабирование, что позволяет проводить тестирование большего разрешения на меньшем.

30 различных разрешений доступно на сайте, начиная от огромного настольного монитора, до того, что они называют «дрянный андроид» (справедливости стоит заметить, что есть и нормальный андроид).

Что касается браузера Firefox, то он немного не корректно работает с данным сайтом. Обратите внимание, что на скриншоте не отображается слайдер между зеленым заголовком и белой областью фонового содержания.

responsive.is

Очень похож на предыдущих два инструмента, но есть одна вещь которая отличает responsive.is от других. Это плавная анимация при переходе от одного устройства к другому, а также полу-прозрачная область которая показывает реальную площадь сайта не попадающую в область просмотра.

Доступные варианты устройств — авто (то как вы видите сайт), настольный комьютер, планшет в альбомной и портретной ориентации, смартфон в портретной и альбомном положении. Задавать произвольные размеры в px, к сожалению нельзя.

Screenqueries

А вот возможности и доступные опции отличают Screenqueries от предыдущих сервисов. 14 телефонов и 12 планшетов представлены здесь, с отдельной возможностью переключения в портретный и альбомный режим. Результаты отображаются на сетке с линейками. Также возможно задать произвольное разрешение, потянув за правый или нижний край.

Интересной особенностью этого сайта, для ряда устройств есть “Trueview” вариант, который показывает ваш сайт в нативном браузере устройства.

К сожалению, Firefox и тут не смог отобразить слайдер. Не нужно обвинять меня, Firefox мой любимый браузер, но такие вот дела.

Screenfly

Screenfly пожалуй наиболее функциональный из всех. Доступно 9 больше чем планшет устройств — от 10" ноутбуков, до 24" мониторов, 5 планшетов, 9 телефонов, 3 телевизионных разрешения, а также произвольное разрешение. Добавьте сюда отдельный переключатель в портретный и альбомный режим, а также опцию показа прокрутки. Также можно поделится ссылкой на тест с помощью одной кнопки.

У каждого устройства в меню указано размер экрана в px., а также в правом верхнем углу отображается фактический размер вашего окна браузера.

Все перечисленные достоинства позволяют претендовать на лидерство если бы не одно но (цитата разработчика): «Screenfly может использовать прокси-сервер, чтобы имитировать устройства во время просмотра вашего сайта. Прокси-сервер имитирует строку агента пользователя, но не поведение этих устройств.» Screenfly является единственным сервисом из списка, который позволяет тестировать на основе строки агента пользователя.

Используете ли вы представленные инструменты в своей практике? Делитесь своими секретами разработки адаптивных сайтов в комментариях.

Пишу вторую часть своей статьи по «эмуляции» технических параметров. Если не успели ознакомиться с первой частью — welcome .

Заходим в левое меню на сайте и выбираем JavaScript:

JavaScript

На что обращаем внимание?

У параметра разрешения экрана есть ещё так же такой параметр как viewport(рабочая область в браузере). То есть из-за адресной строки и вкладок в браузере, полосы панели задач снизу с кнопкой пуск и прокрутки в браузере справа — разрешение viewport будет отличаться в меньшую сторону от разрешения экрана. Это стоит учитывать, если вы эмулируете, например, разрешение, больше размера экрана монитора (пусть 1920х1080), но viewport оставляете таким же, как при меньшем разрешении (к примеру viewport 1349×657, который принадлежит к разрешению 1366х768). Это будет очень палевным для детект-систем, особенно, если это будет повторяться.

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

Про hardwareConcurrency и deviceMemory я рассказывал в предыдущей статье и нового ничего не добавлю.

Battery Status API

Специально проверил, имеет ли слив по этому параметру последняя версия Chrome, выключив от сети свой ноутбук. Имеет:

Следовательно, при работе с ноутбука необходимо иметь заряд 100% и постоянное подключение к сети (при выходе и заходе в разные аккаунты, особенно в одной подсети IP).

Web Audio API

Затрону при обсуждении AudioContext Fingerprint (ниже).

Installed Plug-Ins

Затрагивал в прошлой статье . Держите список из ссылок на 30 самых популярных плагинов и рандомно устанавливайте каждый раз 3-5.

Silverlight

Далее в левом меню пропускаем Flash (т.к. обсуждали в прошлой статье) и выбираем Silverlight.

Если видите эту надпись — значит всё прекрасно и вы имеете одну из последних версий своего браузера (проверил на последних Chrome и Firefox), который не поддерживает эту устаревший и небезопасный плагин.

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

C:\Users\%Имя пользователя%\AppData\LocalLow\Microsoft\Silverlight\is\

Java Applet

Следующий пункт в меню слева Java Applet.

Как понимаете, тут та же самая ситуация, как и с Silverlight. Устаревший и небезопасный плагин, который убрали из поддержки в новых версиях браузеров. Настолько устаревший, что я даже не подскажу, как его включить. Вам это надо?

WebGL

Подскажу только с изменением значений: Unmasked Vendor, Unmasked Renderer и WebGL Report Hash (который меняется после смены первых двух). И только для Mozilla. Последнее значение разберу позже в одной из следующих статей.

Для этого набираем в адресной строке about:config, далее набираем в поиске Vendor и меняем на любое значение. К примеру, просто Mozilla.

Далее вводим Renderer и выбираем webgl.renderer-string-override:

Я ввёл к примеру ANGLE (Intel(R) HD Graphics 620 Direct3D11 vs_5_0 ps_5_0).

WebGL Report Hash у нас должен измениться тоже. Но с Image Hash придется попотеть. Я оставлю этот момент, возможно его дополню, но пока у меня нет кустарного решения по этому моменту, могу только сказать, что в разных браузерах он разный. Мне это не нужно, так как имею свой самописный браузер, где идет автоматическая подмена этого момента.

Можно, естественно и заблокировать доступ к WebGL — но это мощный звоночек к Цукеру и быстрый последующий бан.

WebRTC Leak Test

С WebRTC могу выделить здесь одну вещь — так называемые Media Devices. У меня опять же, этот момент подменяется в своем браузере, но здесь могу подсказать, что можно добавить какие-то девайсы в этот список с помощью программы Virtual Audio Cable (найдете на торрентах). Поиграйтесь с этой программой, без разницы, какие параметры будете менять. Главное изменить конечное значение аудиоотпечатка.

Про наличие/отсутствие видеокамеры и микрофона — запрос предоставляется со стороны сайта и пользователь сам подтверждает, хочет он или нет предоставлять сайту доступ к ним. Так что слива тут быть не может.

Canvas Fingerprint

Для подмены отпечатка Canvas можно использовать расширение Canvas Defender. Он есть как и для Mozilla, так и для Chrome. Да, это палево в какой-то степени, наверняка сайты могут подтянуть, что вы используете это расширение в данный момент. Но если других выходов нет — то можно именно так.

Как альтернатива — в Mozilla можно зайти в Настройки и найти этот раздел в меню Основные:

Выберем Дополнительно… и уберем там галочку с Разрешить веб-сайтам использовать свои шрифты вместо установленных выше. Сохраним изменения. И теперь выберем шрифт по умолчанию (поддерживающий кириллицу) с каким-нибудь размером (лучше стандартный).

Это изменит наш Canvas (кстати, как и Font Fingerprint).

Font Fingerprint

Как я говорил в прошлой статье — нужно иметь набор шрифтов, рандомно устанавливать некоторые из них перед запуском новой виртуальной машины к примеру. Добавлю некоторые свои мысли — необходимо устанавливать как можно более популярные шрифты (и иметь набор наиболее популярных шрифтов). Так как при вытягивании с помощью JS сайт вытягивает установленные шрифты по своему внутреннему списку (то есть ваши заморские он может и не выявить и будет фингерпринт у вас похож на прошлый). Вытягивать он может весь список только с помощью Flash, который уже давно у всех отключен.

Content Filtering

О чем я и говорил. Canvas Protection палится и альтернативное решение в этом плане лучше.

Adblock палится, это естественно, НО ОСОБЕННО будет палиться нестандартный и повторяющийся набор блок-листов. Выход — не использовать Adblock, либо никак его не трогать, чтобы не отличаться от группы людей.

Features Detection

Огромный набор по выделению каких-либо работающих/неработающих параметров на машине. Что можно сказать? Когда на виртуальной машине забанен аккаунт и вы не снесли винду или не почистили всё основательно — возможно, что этот набор остался и выдаст вас своим отпечатком на следующем аккаунте. То есть не устанавливайте лишних драйверов вида KLite Media Codec Pack. Конечно же, не нужно всматриваться в каждый этап, но сравните, для интереса, какие значения у вас на хостовой и виртуальной машины у Modernizr.video.h264 и например Modernizr.jpg2000 и Modernizr.jpgxr. На хостовой машине наверняка h264 — true, а на виртуальных нет. А значения с jpeg и там и там — false. Это вполне нормальная вещь, но если будет что-то необычное и на протяжении долгого времени — это опять же составит о вас неблагоприятный отпечаток в глазах антифрод систем. Не стоит к этому цепляться, как к одному из моментов бана, но с цепочкой значений, где будет происходить слив — это будет играть больше негативно, чем наоборот.

More Tools

Выберите далее More Tools и я объясню некоторые параметры:

Firefox Resources Reader — неактуален, так как слив происходил на старых версиях Firefox. Слив заключался в том, что Firefox выдавал, что он именно Firefox и сливал некоторые хэши данных, которые хранились в его JS файлах.

ClientRects Fingerprinting — метод борьбы точно такой же, как и с Canvas. То есть изменение в Mozilla дефолтного шрифта.

CSS Media Queries — должно отличаться на разных виртуальных машинах.

Эпилог

Надеюсь, было полезно. Также напомню, что это не последняя статья в этом направлении. В следующих статьях я опишу работу с одними из самых мощных антидетект-систем виртуалок.

Собственно, почему в названии статьи «эмуляция», а не «анонимизация»?

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

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

Не смотрите на эти проценты сверху справа после захода на сайт, где whoer высчитывает вашу «анонимность». Это полнейшая дичь для наших дел и ничего не даст нам в плане информации.

Переходим сразу в «Расширенная версия».

IP, WebRTC

Я не буду здесь касаться IP и WebRTC. Об этих параметрах говорят слишком много и, тем более, я затрону WebRTC в одной из следующих статей, а именно как организовать подмену его в виртуальной машине с одним из мощных технических решений по антидетекту.

Flash

IP, сливающийся по Flash — нельзя пропускать. Сейчас у многих, конечно, установленного флеша уже нет на вашем десктоп-решении, но если есть и вы не хотите от него избавляться — то придется произвести следующие манипуляции:

Необходимо изменить файл mms.cfg (если Flash установлен на компьютере).

Если файла нет, то создать по пути:

Windows (32Bit): С:\Windows\System32\Macromed\Flash\
Windows (64Bit): C:\Windows\SysWOW64\Macromed\Flash\
И прописать в конце файла: DisableSockets=1

Но лучше его всё-таки снести, он практически нигде уже не нужен. Так как через него идет слив тех же плагинов.

Время

Смотрим на системное. Казалось бы, выставили время как у местолоположения прокси/ip и всё? Нет, этого недостаточно. Одни из технических моментов, которые вас сольют:

Соответственно само время и совпадение с часовым поясом IP.
У системного времени текст в скобках (Москва, стандартное время). Иногда происходит так, что там написано, к примеру, Саудовская Аравия (на одной из машин была такая проблема), хотя в настройках времени в Windows всё указано верно. Как мне кажется это связано с самой виндой и можно это изменить только сносом и переустановкой с другим образом. Все виртуальные машины, хостящиеся на ней, имели такую же проблему, как и Зеннопостер.
Отклонение в секундах. Как вы видите разница между локальным и системным здесь 21 секунда. Как много может быть машин с таким же отклонением времени, заходящие подряд в аккаунты фейсбук? И тем более в одной подсети IP?

Язык, а именно доля от единицы (q=0,9 или 90%) у пользователя определяется по его истории и кукам. Чем больше значение — тем выше вероятность, что пользователь использует этот язык как свой родной.
Значение после прямой черты в Заголовке и JavaScript определяется по настройкам в браузере. (В Chrome: Настройки → Дополнительные → Языки → Язык).

До изменения настроек в Chrome:

После изменения настроек в Chrome:

Значение в скобках 100% будет разное у разных виртуалок с разной историей в браузере.

TCP/IP stack fingerprinting (Passive OS fingerprinting)

Насчет операционной системы обмусоливать ничего не буду, виртуалки это дело закрывают точно. Интересен здесь последний параметр, TCP/IP.

Что почитать по этому поводу:

Вкратце — значение MTU у проводного интернета и некоторых Wi-Fi модемов должно быть 1500 (максимальное значение).

У мобильных операторов 1400 или 1500 (бывает встречается меньше 1400, обычно кратно 10, как например 1380). У некоторых usb-модемов 1340-1380, тех же usb-модемов 1340.

Также текстовое значение (Windows NT kernel) выдает в вас пользователя не мобильным оператором, а десктопного интернета. У того же пользователя Android там будет как минимум текст про Linux 2.2.x-3.x и т.д. Иногда у некоторых (модем Мегафон) встречается надпись про VPN.

К чему я всё это? Если эмулируете мобильного пользователя, но сидите с модема — этот пункт сдаст вас с потрохами. Плохие поставщики услуг аренды VPN/Proxy, которые не заморачиваются с подобной настройкой безопасности — тоже «сдадут» этим пунктом. Причем проблему с числовым значением MTU они, может быть, закроют, но решения с текстовым значением есть мало у кого на рынке на данный момент.

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

Ничего страшного в DNS от гугла я не вижу (8.8.8.8 и 8.8.4.4), но на дистанции использовать только его на одной подсети — это уже подозрительная вещь для ИИ. Лучше, как по мне, использовать стандартные DNS вашей подсети:

Выдает в вас менее опытного пользователя компьютера;
Расстояние до DNS серверов ближе (у гугла ближайшие находятся в Финляндии);
Разные подсети — разные DNS.

Навигатор

Необходимые для нас данные:

hardwareConcurrency — количество ядер.
deviceMemory — количество ГБ оперативы.

По моему мнению, не нужно их подменять, если они более менее стандартные (к примеру 4 и 4). Но если у вас машина на 32 гб оперативы — на дистанции это будет плохим знаком.

Тут в плане подмены я не смогу ничего подсказать (как минимум в этой статье на данный момент, так как использую для этого свои шаблоны). Но в одной из следующих статей думаю, что затрону.

Оставшиеся данные в подменю Навигатор — не имеют значения, виртуалка закрывает с ними проблему.

Плагины

Если хром — вам покажет более или менее стандартный набор из трех плагинов. Естественно, сайт их видит больше. Для этого вы должны иметь набор из ссылок на самые популярные 25-30 плагинов и каждый раз при настройке собственного антидетект-браузера устанавливать 2-3 плагина.

Местоположение

Не вижу смысла обсуждать местоположение, так как при правильной настройке IP местоположение будет завязано на нём.

Разрешение экрана и битность

Нет резона извращаться и использовать какие-то изжившие себя разрешения компьютера. Можете использовать стандартный и самый популярный 1366х768 и сильно не парится. Конечно на дистанции в 50-100 уже нужно что-нибудь поменять, но я не думаю что по этому параметру пойдет негатив от ИИ.

Статистика самых популярных разрешений:

Битность 24 — стандарт. И менять его смысла нет.

Виртуалка так же закрывает проблему с ними.

Что будет во второй части статьи?

Я затрону AudioContext Fingerprint (отпечаток по звуковой карте) и как его обходить, отпечаток по шрифтам, SocialMedia Login Detection и т.д.

Cтолкнулся с проблемой отображения HTML5 игр, сделанных на GameMaker Studio, на мобильных устройствах (iOS и Android). Ремарка: с HTML/CSS и еже с ними почти не сталкивался, опыта никакого.

Для примера, игра в 960*640. Взял такое изображение:

При запуске на телефоне вижу такую картину:

На экран также выводится разрешение браузера, которое возвращает движок. Как видно, оно в три раза меньше реального разрешения. Естественно, первым делом подумал, что ошибка в движке. Проверил, что возвращает непосредственно браузер - значения были те же самые. Задал вопрос и ответ histrionis'а натолкнул на мысль, что viewport как-то может помочь, ибо неизвестно сколько времени пройдёт, пока разработчики движка исправят проблему (если исправят вообще).

Заглянул в index.html , генерируемый движком, там стоит строка

Как понял, именно из-за этого отключается масштабирование канваса с игрой.

Так как не знаком с этой темой, наугад потыкал разные значения, например

Однако к желаемому результату это не привело (но частичные улучшения бывали).

Есть ли какая-нибудь магия, которая приведёт к нормальной работе всего этого?

P.S. Если поможет:

Сам index.html можно глянуть здесь

Скомпилированный проект здесь (как понимаю, с локалки не работает)

P.P.S. По браузерам ориентируюсь на Chrome и Samsung Internet для Android и Safari с Chrome на iOS.

upd: При использовании, например, <meta name ="viewport" content="width=device-width" /> , я вижу всё изображение, но его вертикальное разрешение ниже, чем должно быть. Например, 960*480 (экран 1920*1080) в ландшафтном режиме. Конечно же, игра в этом случае выглядит ужасно (размытость, нечитаемые мелкие тексты и т.п). В этом же случае при повороте в портретный режим браузер выдаёт разрешение 960*1494. Тогда изображение выглядит отлично, но оно слишком мелкое - занимает чуть больше одной трети экрана (из-за того, что ориентации противоположные). Т.е. мне в первую очередь нужно, чтобы в ландшафтном режиме высота браузера не была меньше высоты канваса игры.

upd2: С помощью Vasiliy Rusin найдено решение, которое решило проблему на Android (при этом браузер должен запрашивать ПК версию сайта, а не мобильную). На iOS по-прежнему отображается в очень низком разрешении.

Читайте также: