telegram Bot机器人打开webapp自动展开全屏

发表于 2024-07-23 更新于 2024-09-01 分类于 telegram ， mini APP ， Game 阅读次数：阅读次数： Valine：
本文字数： 962 阅读时长 ≈ 1 分钟

在telegram上打开webapp的时候，默认只显示半个屏幕，需要用户手动往上滑一下才能全屏。我们现在想要用户打开我们的webapp，自动给他全屏显示。其实方法很简单：

要在 Telegram bot 机器人中打开 WebApp 时设置为全屏，telegram官方已经给出了相关的api，只需要在 WebApp 的 HTML 和 JavaScript 中直接调用即可。

api调用

1	Telegram.WebApp.expand();

只需要加上上面一行代码就能实现。

完整例程

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <title>Telegram WebApp</title>
    <style>
        body, html {
            height: 100%;
            margin: 0;
            overflow: hidden;
        }
        .full-screen {
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
        }
    </style>
</head>
<body>
    <div class="full-screen">
        <h1>Your WebApp Content</h1>
    </div>
    <script>
        // 全屏设置
        Telegram.WebApp.expand();
    </script>
</body>
</html>