Nanfeng

Notes on software development, code, and curious ideas

Expanding a Telegram Web App When It Opens

Telegram may initially open a Web App in a partial-height sheet. Call the provided API to request the expanded state:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<title>Telegram Web App</title>
<style>
html, body { height: 100%; margin: 0; overflow: hidden; }
.full-screen { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
</style>
</head>
<body>
<div class="full-screen"><h1>Your Web App Content</h1></div>
<script src="https://telegram.org/js/telegram-web-app.js"></script>
<script>Telegram.WebApp.expand();</script>
</body>
</html>
+