I am writing to report a significant discrepancy between the Mobile Preview in AI Studio and how applications actually render on a mobile device. The preview is misleading because it does not account for the screen space occupied by the mobile browser’s own interface.
Problem:
-
Incorrect Viewport: The Google AI Studio preview renders the app using the full screen dimensions. It fails to subtract the pixels used by the device’s browser UI (i.e., the top address bar and bottom navigation bar).
-
Misleading Layout: This creates a false impression that the app’s UI fits within the mobile viewport.
-
Real-World Impact: As shown in the attached screenshots, the preview (Image 2) suggests the UI is correct. However, on an actual device (Image 1), the browser’s UI pushes a significant portion of the app off-screen, including the “Go” button and all elements below it.
Suggestion:
To provide an accurate and useful development tool, the mobile preview must be updated to simulate the true available viewport on a mobile device, factoring in the space consumed by standard browser interfaces. We need to be able to tell Google AI Studio how much space it used by the browser, both at the top and bottom of its UI.
Screenshot 1: view of app on actual mobile device
Screenshot 2: view of app in Google AI Studio preview environment (mobile, portrait)
