Размер и макет

<caputchin-game> может рендериться в трёх макетах (задаются атрибутом layout): inline, modal и fullscreen. Как ты задаёшь его размер, зависит от макета, потому что макеты modal и fullscreen показывают две отдельные коробки:

• Элемент на странице: то, что сидит в потоке твоей страницы. В inline это вся панель игры; в modal / fullscreen это маленькая галочка, которую посетитель кликает, чтобы открыть игру.
• Коробка игры: диалог, который открывается сверху в modal / fullscreen, с игрой внутри. (В inline отдельного диалога нет: панель и есть игра.)

Четыре атрибута задают размер этих двух коробок. Каждое значение представляет собой одно из auto (по умолчанию), full (охватывает доступное пространство) или положительное число пикселей вроде 480.

Inline

У inline одна коробка, поэтому width / height задают размер всей панели. overlay-width / overlay-height тут ничего не делают и игнорируются (виджет выводит предупреждение, если ты их задаёшь).

<!-- A panel that spans its container, at a fixed height -->
<caputchin-game sitekey="cpt_pub_..." layout="inline" width="full" height="480"></caputchin-game>

Modal и fullscreen

Здесь две коробки независимы. width / height задают размер входной галочки на твоей странице; overlay-width / overlay-height задают размер диалога и игры, которые открываются, когда посетитель её кликает.

<!-- Full-width entry checkbox; the game opens at its natural size, centered -->
<caputchin-game sitekey="cpt_pub_..." layout="modal" width="full"></caputchin-game>

<!-- Compact entry checkbox; the game fills the dialog -->
<caputchin-game sitekey="cpt_pub_..." layout="modal" overlay-width="full" overlay-height="full"></caputchin-game>

<!-- A 500px entry, opening a fixed 900x600 game dialog -->
<caputchin-game
  sitekey="cpt_pub_..."
  layout="modal"
  width="500"
  overlay-width="900"
  overlay-height="600"
></caputchin-game>

overlay-width="full" заставляет игру заполнить диалог вдоль этой оси; значение в пикселях прикрепляет игру к этому размеру (модал плотно облегает её). В fullscreen диалог уже покрывает вьюпорт, так что overlay-* управляет тем, растягивается ли игра, чтобы заполнить его, или сидит по центру в своём собственном размере.

Когда ты оставляешь коробку игры незаданной

Если ты не задаёшь overlay-width / overlay-height, коробка игры берёт размер, который автор игры выбрал для игры (её предпочитаемый след, объявленный в caputchin.json игры). Так что большую часть времени тебе нужны только width / height для макета твоей страницы, а игра задаёт свой размер разумно сама. Задавай overlay-* только когда хочешь это переопределить.

На узких экранах

Когда игра шире, чем отведённое ей место (телефон, узкая колонка), виджет удерживает её в этом месте, так что она никогда не растягивает твою страницу вбок. Как она вписывается, зависит от того, как автор игры объявил её в caputchin.json игры:

• Адаптивная игра берёт более узкую ширину и перерисовывается под неё, сохраняя обычную высоту.
• Игра, помеченная как неадаптивная ("responsive": false в marketplace.support), сохраняет форму. Виджет равномерно уменьшает всю игру, так что она выглядит так же, только меньше. В modal и fullscreen она также уменьшается, чтобы уместиться по высоте экрана, на случай телефона, повёрнутого горизонтально.

Это действует, когда игра сама задаёт размер своей коробки. В inline это значит, что ты не задаёшь width и height; в modal / fullscreen это значит, что ни overlay-width, ни overlay-height не равен full. Ось, которую ты не задаёшь, тоже считается full, если автор игры задал для этой оси full в предпочитаемом следе игры (в caputchin.json). Коробка, у которой ось равна full, наоборот, растягивает игру, чтобы та её заполнила.

Значения в пикселях

Простое число означает CSS-пиксели: width="500" и width="500px" эквивалентны. Нулевые, отрицательные и нечисловые значения отвергаются (атрибут откатывается к своему значению по умолчанию, а виджет выводит предупреждение).

См. также

• Элемент игрового виджета: полный набор атрибутов <caputchin-game>.
• Методы и события виджета: управлять виджетом и реагировать на него.