Telegram API Question posted in
A comprehensive official documentation can be found here.

Telegram webapp screen size

I would like to know if the screen size of the Telegram mini app is fixed on the PC (Mac/Windows) or mobile (iOS/Android) versions.

I have noticed that during development, some people’s display heights vary significantly. I want to know if this height is not fixed or if it is due to differences in devices.

Tags:

2

Answers


  1. 0

    Screen size vary from a device to another, I assume that you mean aspect ratio. For Mobile it’s usually 9:16.

    Login or Signup to reply.
  2. 0

    No, it is not, I realized this when I looked at the viewport on the iPhone XR, iPhone 14 Pro Max and iPhone 15. There is a different viewport everywhere, the only solution, in my opinion, is to disable scaling and use media queries.

    UPD. I looked at the viewport on different devices and asked gpt to estimate the rest of the devices. In general here is the table

    Device Regular viewport Approximate viewport in TG Mini App
    iPhone 11 414px 375px
    iPhone 11 Pro 375px 340px
    iPhone 11 Pro Max 414px 375px
    iPhone 12 390px 350px
    iPhone 12 Mini 360px 330px
    iPhone 12 Pro 390px 350px
    iPhone 12 Pro Max 428px 390px
    iPhone 13 390px 350px
    iPhone 13 Mini 360px 330px
    iPhone 13 Pro 390px 350px
    iPhone 13 Pro Max 428px 390px
    iPhone 14 390px 350px
    iPhone 14 Plus 428px 390px
    iPhone 14 Pro 393px 340px
    iPhone 14 Pro Max 430px 390px
    iPhone 15 393px 320px
    iPhone 15 Plus 430px 390px
    iPhone 15 Pro 393px 320px
    iPhone 15 Pro Max 430px 390px
    iPhone 16 450px 400px 
    /* iPhone 15 */
@media (min-width: 320px) and (max-width: 340px) {
    html {
      font-size: 12px;
    }
  }
  
  /* iPhone 12 Mini, 13 */
  @media (min-width: 330px) and (max-width: 350px) {
    html {
      font-size: 13px;
    }
  }
  
  /* iPhone 11 Pro */
  @media (min-width: 340px) and (max-width: 375px) {
    html {
      font-size: 14px;
    }
  }
  
  /* iPhone 12, 13, 14 */
  @media (min-width: 350px) and (max-width: 390px) {
    html {
      font-size: 15px;
    }
  }
  
  /* iPhone 12 Pro Max, 14 Pro */
  @media (min-width: 390px) and (max-width: 430px) {
    html {
      font-size: 16px;
    }
  }
  
  /* iPhone 15 Pro, 16 */
  @media (min-width: 400px) {
    html {
      font-size: 17px;
    }
  }
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search