Ionic React app is incredibly zoomed in and doesn't adhere to confines on 1080p Android TVs but is the correct size on a 1080p Desktop Emulator

Issue

My situation

I converted a React JS based application that is front end only to Ionic React (a hybrid framework that can run apps on android, iOS, and web) with the end goal that it could eventually be run on a 1080p Android TV (with OS Android 12.0). The conversion itself was challenging enough but I managed to get it done and managed to run my once purely web-based app on multiple android devices.

Here's my problem. For some reason, whenever the application is run on any sort of Android TV, emulator or real device (OS Android 12.0) (I've tried both with the same result) the page loads in with everything zoomed in instead of adhering to the HD/1080p confines that the pages should be set to. Here's a picture.

TV

Conversely, when I run this application on an Android Desktop emulator (12L) (remember the app was originally designed as a web application for a 1920x1080 desktop), the page loads in normally and looks exactly as it should, with the full page fully visible.

Desktop

The TL;DR? I need the above page to load on a 1080p Android TV / Android Studio TV emulator the same way it's loading on a 1080p Android Studio Desktop Emulator, with the full page visible and no scrolling required.

What I've tried to do

• I've messed with the viewport tag of my index.html file The only noticeable changes I've been able to make to the application when it runs on a TV/TV Emulator is by changing

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"/>

to

<meta name="viewport" content="width=device-width, initial-scale=0.5, maximum-scale=1.0"/>

The above has made the app load in on the TV to the point that I can scroll left/right and up/down and see the rest of the page but that's not the end goal. I want to be able to see the whole page without having to scroll at all.

• I did some searching on stack overflow and other sites and found frighteningly little information on this issue, which I suspect is a lot more widespread. I did see some suggestions that included specifying a targetSdkVersion in the Android_Manifest.xml file as this link describes. --> https://developer.android.com/guide/topics/manifest/uses-sdk-element. That was a dead end and didn't affect anything.

• I also saw another post that suggested specifying a specific sdk to build with inside the android block of build.gradle but that proved to be a quick dead end.

I can't help but feel like I'm overlooking something really stupid here but I've banged my head against this problem for a day now.

Anyone have any suggestions or recommendations?

Solution

Managed to solve my own problem. Used ionic serve to display my application inside a browser and then I was able to css (zoom property was what I was missing) my way into a working product.

Answered By - Connor Price