External Publication
Visit Post

Widget fullscreen bottom clearance: how to distinguish native mobile app vs mobile web browser?

OpenAI Developer Community April 28, 2026
Source

I’m building a fullscreen widget (using requestDisplayMode({ mode: ‘fullscreen’ })) and need to handle bottom clearance differently depending on the hosting context:

Native mobile app (iOS/Android): The WebView sits above the native chat bar. No extra bottom padding needed — the widget fills exactly the space it’s allocated. Only env(safe-area-inset-bottom) is required.

Mobile web browser (chatgpt.com in Chrome/Safari): The widget iframe receives the full viewport height, but the chatgpt.com DOM input composer (~102px) visually overlays the bottom of the widget. Without extra bottom padding, sticky footers and CTAs end up hidden behind the composer.

The problem: I cannot find any SDK signal to distinguish these two cases. Both contexts:

  • Set window.openai.userAgent.device.type === ‘mobile’ via the openai:set_globals event

  • Have identical navigator.userAgent strings (both are Chrome on Android)

  • Do not include the Android WebView wv UA marker (modern Chrome-based WebViews omit it)

The widget cannot inspect the parent frame DOM to detect the composer element.

Questions:

  1. Is there an existing window.openai property or set_globals payload field that identifies native app vs web browser context?

  2. Is window.openai.displayMode or any other property reliable for this distinction?

  3. If not, would OpenAI consider adding a window.openai.hostContext or similar field (e.g. 'native-app' | 'web') to the SDK? This would unlock proper layout handling for fullscreen widgets on mobile.

Current workaround attempted:

  • UA heuristics (/\bwv\b/, /Version/\d/ on Android) — fails for modern Chrome-based WebViews

  • device.type === ‘mobile’ from set_globals — same value in both contexts, can’t distinguish

Any guidance appreciated!

Discussion in the ATmosphere

Loading comments...