[EXP] Яндекс.Игры и решение для адаптивного игрового пространства в Unity 3D WebGL

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

Для мобильных устройств:
1.6.1.1. Игра или WebApp находятся в полноэкранном режиме во время игрового процесса или запуска.

Для ПК:
1.6.2.1. Активное поле растягивается по вертикали или горизонтали до края доступной области (без учета sticky-баннеров).
1.6.2.1. Визуальные элементы не деформируются и не растягиваются непропорционально при изменении размера доступной области.

Можно было бы экспериментировать с различными подложками, закрывая область экрана, которую в виду игровых ограничений пользователь не должен видеть, например раздвинув окно браузера как на фото ниже. В случае, если игровая область будет занимать 100% по ширине и высоте это может вылиться неприятными последствиями — лучше решать их сразу во время разработки, либо не создавать такой возможности.

Но самым простым и эффективным решением для меня оставалось сохранение пропорций на ПК и заполнение всей доступной области на мобильных устройствах.

Достичь этого можно используя лишь CSS, работая со стандартными блоками:

Вот и все решение. Надеюсь кому-то это будет полезным.