如何让Telegram Mini App实现全屏显示（无需启用MainButton）

云原生阿岚

2026-6-24

解决Telegram Mini App无MainButton时全屏隐藏底部聊天输入框的方案

核心思路

Telegram Mini App默认仅在启用MainButton时会隐藏底部聊天输入框，我们可以通过初始化MainButton并隐藏的技巧，结合viewport适配，实现无可见MainButton的全屏效果，同时兼容官方API规范。

具体实现步骤

配置正确的Viewport元标签
在HTML头部添加该标签，确保页面内容能延伸到设备屏幕的安全区域之外：

<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">

初始化并隐藏MainButton
无需显示按钮，但需让Telegram识别到MainButton的存在，以此触发底部输入框隐藏。在Telegram WebApp初始化后执行以下代码：

const tg = window.Telegram.WebApp;
// 扩展应用至屏幕顶部
tg.expand();
// 初始化MainButton（设置空文本避免占位）
tg.MainButton.setText('');
// 显示MainButton（触发Telegram隐藏底部输入框）
tg.MainButton.show();
// 立即隐藏MainButton，用户不会看到该按钮
tg.MainButton.hide();

CSS适配全屏布局
确保应用内容完全覆盖屏幕，包括底部安全区域：

body {
  margin: 0;
  padding: 0;
  width: 100vw;
  height: 100vh;
  /* 延伸内容至安全区域外 */
  height: calc(100vh + env(safe-area-inset-bottom));
  overflow: hidden;
}

额外优化点

如果仍有底部留白，可设置WebApp的背景色与应用背景一致，消除视觉边界：
```
tg.setBackgroundColor('#你的应用背景色');
tg.setHeaderColor('#你的应用背景色');
```
禁用垂直滑动返回聊天界面的功能，避免用户误触退出：
```
tg.disableVerticalSwipes();
```