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

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!