Widget fullscreen bottom clearance: how to distinguish native mobile app vs mobile web browser?
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
wvUA marker (modern Chrome-based WebViews omit it)
The widget cannot inspect the parent frame DOM to detect the composer element.
Questions:
Is there an existing window.openai property or
set_globalspayload field that identifies native app vs web browser context?Is window.openai.displayMode or any other property reliable for this distinction?
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 WebViewsdevice.type === ‘mobile’ from
set_globals— same value in both contexts, can’t distinguish
Any guidance appreciated!
Discussion in the ATmosphere