Чтобы выложить игру на Яндекс, нужно чтобы она удовлетворяла требованиям. Одними из таких требований является расположение и масштабирование игровой области на экране.
Для мобильных устройств:
1.6.1.1. Игра или WebApp находятся в полноэкранном режиме во время игрового процесса или запуска.
Для ПК:
1.6.2.1. Активное поле растягивается по вертикали или горизонтали до края доступной области (без учета sticky-баннеров).
1.6.2.1. Визуальные элементы не деформируются и не растягиваются непропорционально при изменении размера доступной области.
Решение
Можно было бы экспериментировать с различными подложками, закрывая область экрана, которую в виду игровых ограничений пользователь не должен видеть, например раздвинув окно браузера как на фото ниже. В случае, если игровая область будет занимать 100% по ширине и высоте это может вылиться неприятными последствиями — лучше решать их сразу во время разработки, либо не создавать такой возможности.
Но самым простым и эффективным решением для меня оставалось сохранение пропорций на ПК и заполнение всей доступной области на мобильных устройствах.
Сохранение пропорции 16/9 при любом размере окна браузера в WebGL
Достичь этого можно используя лишь CSS, работая со стандартными блоками:
#unity-container
{
position: fixed;
display: flex;
aspect-ratio: 16/9; /* Фиксирует соотношение 16/9 */
width: min(calc(100vh*(16/9)),100vw); /* Вычисляет из соотношения 16/9 */
height: auto;
}
#unity-container.unity-mobile { width: 100%; height: 100% }
Вот и все решение. Надеюсь кому-то это будет полезным.