Настройка области просмотра

Compose Multiplatform для веба использует функцию ComposeViewport для отображения пользовательского интерфейса на HTML canvas. Она не добавляет глобальные стили CSS, поэтому вы можете полностью контролировать интеграцию приложения со структурой HTML.

Чтобы содержимое правильно размещалось в окне браузера, явно задайте CSS для контейнера. Если CSS не задан, размер canvas может изменяться некорректно или он может не занимать всё предназначенное для него пространство.

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

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

Затем инициализируйте точку входа в функции main вашего набора исходного кода для веба:

@OptIn(ExperimentalComposeUiApi::class)
fun main() {
    ComposeViewport(viewportContainerId = "webApp") {
        App()
    }
}