You are not logged in.

Dear visitor, welcome to Forum. If this is your first visit here, please read the Help. It explains in detail how this page works. To use all features of this page, you should consider registering. Please use the registration form, to register here or read more information about the registration process. If you are already registered, please login here.


Monday, December 10th 2018, 12:06am

How to detect Notched Mobile like iphone X, XR, XS, XSmax and few android as well ?


to adapt interface for smartphone with notch on top screen,
i need to know how to setup the device detection : devices="..."

to detect the notched iphone family : iPhone X, XR, XS, XSmax
i was thinking to devices="iphone+screen dimensions" or something like that
but what if next iphone gen will comes out without notch ?

for android also ? not very familiar with...

anyone already have to deal with that ?




Monday, December 10th 2018, 10:34am


krpano has already build-in support for iOS devices with notches - see here and the links there for more information:…#news119iphonex

The safe-area support in krpano is currently only enabled for iOS to avoid conflicts with potentially different working implementations from Android Chrome. I have no Android device with a notch yet and at the moment it's not clear if even Android Chrome itself already really support that...

Best regards,


Monday, December 10th 2018, 12:23pm

thanks for answering,

i'm not sure if it gonna help me,

the setting viewport-fit=cover is already added into the <meta> viewport element in the html file then the pano cover the whole screen,
there only some layers hidden by the notch who need a shift.

my project is an app : using Cordova embbeding a krpano version 1.19 pr13 (upgrading beyon pr13 cause more bugs at this point) ,
So if i use : layer[name].safearea
it will shift layers into safe area ?
for all devices or only the ones with a safe-area concern (notched) ?



Monday, December 17th 2018, 1:54pm


safe-area-support was added in 1.19-pr14.

All layers are by default inside the safe-area and layer[name].safearea=false can be used to place it 'outside' (that means relative to the fullscreen-area and not relative to the safe-area).

And the safe-area is only there when the browser reports one of course (and iOS only at the moment).

About Cordova apps - sorry, no idea about webviews, you might need to support safe-area manually at app-level and forward it to the webview...

Best regards,