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

  • Hi,

    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 ?

    Thanks

    z

  • Hi,

    krpano has already build-in support for iOS devices with notches - see here and the links there for more information:
    https://krpano.com/forum/wbb/inde…#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,
    Klaus

  • 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) ?

    z

  • Hi,

    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,
    Klaus

Participate now!

Don’t have an account yet? Register yourself now and be a part of our community!