Notch recognition not working on iOS home screen web app

Questions
1

I believe that F7 takes care of adjusting the bottom and top spacing on mobile phones to account for camera and bottom items. When I place my web app onto the iPhone XR home screen the overall size of the app is too large so that bottom nav is partially hidden. It looks like F7 correctly expanded the height of the nav bar to account for the bottom ‘notch’ on the XR but the overall size of the app was not adjusted.

It could be that F7 does not pick up that its running in the webkit that Apple uses for home screen web apps which is different than iOS Safari.

image1%20(1)
image1 (1).png828×1792 33.2 KB

2

F7 handles it correctly, try for example to add Kitchen sink https://framework7.io/kitchen-sink/core/?theme=ios to see. Just make sure all required meta tags for that is there

3

Its hard to tell whether it works with kitchen-sink because most pages are scrollable lists … except for the /badges page which has a bottom nav example. That seems to have the correct spacing when its displayed on the iPhone XR. How can I see the source for /badges? When I do viewsource I just get the main kitchen-sink page even if I am viewing the /badges page.

4

Check required meta tags in index.html and make sure you have the same. Not sure how did you created an F7 project but project created with F7 CLI has all set correcrly

5

I used one of the open templates by I dont think it was updated to the latest F7 version.

The only difference I see is that kitchen-sink index has “safe-areas” added the view classes. I was under the impression from the docs that this was only needed for landscape mode. Portrait was said to be handled automatically? Just for kicks I tried “safe-area” and as expected it helped the left and right sides in landscape mode (nice!).

In portrait orientation Framework7 will do required styles modifications automatically, but in landscape orientation some additional classes must be added to elements
[https://framework7.io/docs/safe-areas.html](Safe Areas documentation)

Its interesting to me that the bottom nav with icons gets the extra height that is needed but that the main view remains longer than it should be so the nav is push down.

I will pore through the files again to see if I missed something but it looks like I have the same tagging in place.

6

Here are some of the definitions in my index.html

<div class="views tabs safe-areas">

<div id="view-home" class="view view-main view-init tab tab-active safe-areas">
7

What about metas. It must be:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, viewport-fit=cover">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
8

Yes, all those metas match what I have on mine. It seems like the bottom nav-bar (tab bar) sizes correctly giving it extra padding. The overall view does not seem to size down correctly to insure everything fits on the XR screen.

9

Here is my index.html (summarized)

<div class="views tabs">
  <div class="toolbar tabbar-labels toolbar-bottom">
    <div class="toolbar-inner">
      <a href="#view-home" class="tab-link tab-link-active">
        <i class="icon f7-icons ios-only">home</i>
        <i class="icon f7-icons ios-only icon-ios-fill">home_fill</i>
        <i class="icon material-icons md-only">home</i>
        <span class="tabbar-label">Home</span>
      </a>
      <a href="#view-offers" class="tab-link">
        <i class="icon f7-icons ios-only">persons</i>
        <i class="icon f7-icons ios-only icon-ios-fill">persons_fill</i>
        <i class="icon material-icons md-only">people</i>
        <span class="tabbar-label">Offers</span>
      </a>
      <a href="#view-chats" class="tab-link">
        <i class="icon f7-icons ios-only">messages</i>
        <i class="icon f7-icons ios-only icon-ios-fill">messages_fill</i>
        <i class="icon material-icons md-only" style="width:24px">messages</i>
        <span class="tabbar-label">Chats</span>
      </a>
    </div>
  </div>

  <div id="view-home" class="view view-main view-init tab tab-active safe-areas">
  </div>

  <!-- Sessions View -->
  <div id="view-sessions" class="view tab">
  </div>
  
  <!-- Offers View -->
  <div id="view-offers" class="view tab">
  </div>

  <!-- Chats View -->
  <div id="view-chats" class="view tab">
  </div>
</div>
10

Do you a have live preview link so we can check?

11

Sure, I created a minimal version that exhibits the same behavior on my iPhone XR.

https://brighter.me/test/

12

You have wrong meta tags as i said before:

ss
ss.png1304×192 50.5 KB

Should be only these two:

<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
13

Thanks for the help! I will make the change

Why does apple-mobile-web-app-title effect the safe-area layout? Although apple will default to for the home screen app title I would rather control it directly using that tag.

It would be good to add the iOS specific meta-tag requirements to the safe-area documentation page when you get a chance

14

It looks like the apple-mobile-web-app-title does not effect your calculation for safe-area so I was able to add that back in.

It was the duplicate status bar style that messed up the spacing. That line came from the framework7 template I was using so I contacted that owner to let them know they have the extra meta-tag in their template.

Thank you!

1 Like