Почему мини приложение в телеграм не открывается полностью на весь экран?

Question

Пробую написать своё мини приложение в телеграм, не могу понять, почему на компьютере открывается и все функционирует, а запустив приложение через телефон открывается не во весь экран и видео не работает чат бот можно найти в тг под ником @GROZTEX

import { useEffect } from 'react';
import './App.css';
const tg = window.Telegram.WebApp;

function App() {
  useEffect(()=>{
   tg.ready()
  },[])
  
  const onClose =()=>{
     tg.close()
  }
  return (
       <div className="video-bg">
        <video className="video-bg.mp4"  autoPlay loop muted preload='auto' src="./earth-fon.mp4"></video>
        <div className='effects'></div>
        <div className="video-bg__content">
           <div className="App">
             <div className='logo'>GROZ⍑EX</div>
             <ul>
              <li className='exchange'><a className='link' href='/Exchange'>Купить/Продать USDT</a></li>
              <li className='about'><a className='link' href='/About'>О нас</a></li>
              <li className='requests'><a className='link' href='/Requests'>Все заявки</a></li>
              <li className='support'><a className='link' href='/Support'>Поддержка</a></li>
              <li className='valuation'><a className='link' href='/Valuation'>Курс</a></li>
              <li className='close'><button className='btn__close' onClick={onClose}>закрыть</button></li>
             </ul>
           </div>
           
        </div>
    </div>   
   
  );
}

export default App;

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  /* height: var(--tg-viewport-stable-height);
  height: var(--tg-viewport-height); */

}

body {
  background: var(--tg-theme-bg-color);
  color: var(--tg-theme-text-color);

}
.logo{
  margin: 40px 0 20px 0;
}
.video-bg {

height: 100vh;
  display: flex;
  justify-content: center;
  position: relative;
}

.video-bg video {
  width: 100%;
  min-height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  object-fit: cover;
  z-index: 1;
}

.video-bg__content {
  z-index: 2;
  color: white;
  font-size: 40px;
}

.App{
   display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.effects {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  width: 100%;
  height: 100vh;
  background-color: rgb(2, 10, 21, 0.9);
}

ul {
  list-style-type: none;
  display: grid;
  grid-template-columns: 1fr 1fr ;
  font-weight: 400;
}
.exchange, .close{
 grid-column-start: 1;
 grid-column-end: 3;
 margin-bottom: 15px;
}

.btn__close{
  background:none;
  border: none;
  color: white;
  font-weight: 400;
  font-size: 20px;
}
.close{
    margin: 20px 7px 0 7px;
}
li{
  user-select: none;
  border: 1px solid blue;
  padding: 15px 35px ;
  margin: 7px;
  border-radius: 10px;
  text-align: center;
  cursor: pointer;
  font-size: 20px;

}

li:active{
  background-color: rgba(5, 51, 116, 0.3);
}

.link {
  text-decoration: none;
  color: white;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.3.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.3.1/umd/react-dom.production.min.js"></script>

Answer 1

Проблема заключалась в том, что нужно добавить метод expand() в useEffect(), соответственно код должен быть таким

function App() {
  useEffect(()=>{
   tg.ready();
   tg.expand();
  },[])

БЛОГ НА HUSL

Почему мини приложение в телеграм не открывается полностью на весь экран?

Ответы (1 шт):