How can we help you today?

Start a new topic
Discussions Cordova, Titanium, Unity, Xamarin Xamarin Questions or Problems

Iphone X: view vertically stretched

Hi, I have a problem with the view on Iphone X. I'm developing with Xamarin and this is what i see when I execute the code similar to your "Multiple Pois" example:


image


Why HTML is not full screen and i see camer on the top of header in index?


This is the index code (index.html):

 

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <!--  basic meta information -->
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="Content-Type" content="application/json; charset=utf-8">
    <meta content="width=device-width,initial-scale=1,maximum-scale=5,user-scalable=yes" name="viewport">

    <title>DiscoverMilanAR</title>

    <script src="https://www.wikitude.com/libs/architect.js"></script>
    <script src="../ade.js"></script>

    <!-- important for static POI loading - include the static data  -->
    <script type="text/javascript" src="js/myjsondata.js"></script>

    <!-- positioning of poi-radar -->
    <link rel="stylesheet" href="css/poi-radar.css" />

    <!-- jquery mobile CSS -->
    <link rel="stylesheet" href="jquery/jquery.mobile-1.3.2.min.css" />
    <!-- required to set background transparent & enable "click through" -->
    <link rel="stylesheet" href="jquery/jquery-mobile-transparent-ui-overlay.css" />

    <!-- jquery JS files -->
    <script type="text/javascript" src="jquery/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="jquery/jquery.mobile-1.3.2.min.js"></script>

    <!-- marker representation-->
    <script src="js/marker.js"></script>

    <!-- World logic-->
    <script type="text/javascript" src="js/WorldLogic.js"></script>

    <!-- radar component -->
    <script type="text/javascript" src="js/radar.js"></script>
</head>

<body>
<div data-role="page" id="page1" style="background: none;">
    <!-- MAIN PAGE CONTENT -->
    <!-- header of UI holding feature buttons -->
    <div id="header-status" data-role="header" data-position="fixed" data-theme="c">
        <a href="javascript: World.showRange();" data-icon="gear" data-inline="true" data-mini="true" data-theme="c">Range</a>
        <h1></h1>
    </div>

    <!-- the radar div - Wikitude SDK radar will be drawn into this div -->
    <div class="radarContainer_left" id="radarContainer"></div>

    <!-- transparent footer-->
    <div data-role="footer" class="ui-bar" data-theme="f" data-position="fixed" style="text-align:center;">

        <!-- small status-button -->
        <a style="text-align:right;" id="popupInfoButton" href="#popupInfo" data-rel="popup" data-role="button"
           class="ui-icon-alt" data-inline="true" data-transition="pop" data-icon="alert" data-theme="e"
           data-iconpos="notext">Log</a> </p>

        <!-- popup displayed when button clicked -->
        <div data-role="popup" id="popupInfo" class="ui-content" data-theme="e" style="max-width:350px;">
            <p style="text-align:right;" id="status-message">Trying to find out where you are</p>
        </div>

    </div>


    <!-- PANELS, ONLY VISIBLE ON DEMAND -->

    <!-- panel containing POI detail information -->
    <div data-role="panel" id="panel-poidetail" data-position="right" data-display="overlay"
         style="background-color:#F0F0F0;" data-theme="c">

        <!-- header with "close" button -->
        <div data-role="header" data-theme="c">
            <h1>Details</h1>
            <a href="#header" data-rel="close">Close</a>
        </div>

        <!-- content of POI detail page, you may also add thumbnails etc. here if you like -->
        <div data-role="content">

            <!-- title -->
            <h3 id="poi-detail-title"></h3>

            <!-- description -->
            <h4 id="poi-detail-description"></h4>

            <!-- distance -->
            <h4>Distance: <a id="poi-detail-distance"></a></h4>
        </div>
    </div>


    <!-- range panel -->
    <div data-role="panel" id="panel-distance" data-position="left" data-display="overlay"
         style="background-color:#F0F0F0;" data-theme="c">

        <!-- header with close button -->
        <div data-role="header" data-theme="c">
            <h1>Range</h1>
            <a href="#header" data-rel="close">Close</a>
        </div>

        <!-- distance information, calculated/updated in code  -->
        <div data-role="content">

            <!-- Range in m/km-->
            <h4> Range: <a id="panel-distance-value"></a></h4>

            <!-- Amount of visible places -->
            <h4> Visible: <a id="panel-distance-places"></a></h4>

            <!-- default slider -->
            <input id="panel-distance-range" type="range" data-highlight="true" name="rangeSlider" min="0" max="100"
                   value="100" data-show-value="false" step="5" data-popup-enabled="false" readonly="readonly">
        </div>
    </div>
</div>
</body>
</html>


 

5 CommentsSorted by Popular

Hi Vincenzo,


Try adding `viewport-fit=cover` to the content of your viewport meta tag. Like this:

<meta content="width=device-width,initial-scale=1,maximum-scale=5,user-scalable=yes,viewport-fit=cover" name="viewport">


This allows the content to be rendered over the iOS safe area margins on the top and bottom of the display. After adding this, if some element is being hidden by the notch at the top of the screen, or by the home indicator line at the bottom, you can access the height of the safe area margins to relocate this element with CSS. Here are some examples of property values you could assign to that element:

padding-top: env(safe-area-inset-top); /* Adds a top padding with the top safe area inset height (notch) */
padding-bottom: env(safe-area-inset-bottom); /* Adds a bottom padding with the bottom safe area inset height (home indicator) */

padding-top: calc(12px + env(safe-area-inset-top)); /* Adds a top padding of 12 pixels plus the top safe area inset height */


Please let us know if this solves your issue.


Thank you.

- Damian

Thanks for the answer but nothing to do, I had already entered this line of code but nothing. I have always the same problem. I also noticed that, I don't know why, but the radar is ovalized vertically

image

but the associated css code is this:

.radarContainer_left {
    position: absolute;
    top: 85px;
    left: 0px;
    width: 100px;
    height: 100px;
}

If i add navigation controller, it's all ok, but i don't want lose top part of screen to add navigation bar. I don't know if I'm doing something wrong, can you help me? This is the Git repository: https://github.com/Pische/AdeonAR


Thank you,

Vincenzo


Hi Vincenzo,


The settings I mentioned require WebKit to work. Our `WTArchitectView` does not use WebKit by default, and while we have a `shouldUseWebKit` flag in the APIs of our other extensions, unfortunately this is missing in the Xamarin API right now.


Sorry for the inconvenience. We are working on this, and aim to add this WebKit setting to our Xamarin API in the next SDK release.


In the meantime, I would suggest that you use a navigation controller as you mentioned before, because the top Safe Area inset/notch is already handled natively by the navigation bar. Once we add this WebKit option to the Xamarin API, you will be able to enable it and the HTML/CSS lines I mentioned in the previous message should work for you. You could then get rid of the navigation controller if you wish.


Thank you.

- Damian

Hi, 

after the latest update (8.9.0) the problem has been solved only for the top. I don't know why but on devices with a 16:9 ratio screen the problem persist on the screen bottom (i've tried also with the Xamarine Example). I have also entered `viewport-fit=cover` to the content. On the iphone 8 the problem does not arise. Do you know how to solve?

Thank you.

- Vincenzo


image



This is the screenshot made with the original example project:

image



Hi,

ok thanks, for the moment i will insert the navigation controller waiting for the next SDK release. However, the problem also appears at the bottom. Do you have ideas on how can I resolve momentarily pending the implementation of WebKit?

image


Thank you,

Vincenzo

Login or Signup to post a comment
More topics in Xamarin Questions or Problems
See all 155 topics
© 2023 Wikitude, a Qualcomm company