【ios】ons-tabbarの下に余白ができる

開発環境

プラットフォーム：Monaca
テンプレート　　：Onsen UI JS Tabbar（Javascript）
仕様デバイス　　：iPhone X (ios 13.4.1)

発生している問題

iosのみにons-tabbarの下に余白ができます。以前の作成していたアプリすべて（OnsenUIを使用したアプリ）に余白ができていました。
これはonsenUIのバグでしょうか？

index.html

html
1<!DOCTYPE HTML>
2<html>
3<head>
4  <meta charset="utf-8">
5  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover">
6  <meta http-equiv="Content-Security-Policy" content="default-src * data: gap: https://ssl.gstatic.com; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
7  <script src="components/loader.js"></script>
8  <script src="lib/onsenui/js/onsenui.min.js"></script>
9
10  <link rel="stylesheet" href="components/loader.css">
11  <link rel="stylesheet" href="lib/onsenui/css/onsenui.css">
12  <link rel="stylesheet" href="lib/onsenui/css/onsen-css-components.css">
13  <link rel="stylesheet" href="css/style.css">
14
15  <script>
16    ons.ready(function() {
17      console.log("Onsen UI is ready!");
18    });
19
20    document.addEventListener('show', function(event) {
21      var page = event.target;
22      var titleElement = document.querySelector('#toolbar-title');
23
24      if (page.matches('#first-page')) {
25        titleElement.innerHTML = 'My app - Page 1';
26      } else if (page.matches('#second-page')) {
27        titleElement.innerHTML = 'My app - Page 2';
28      }
29    });
30
31    if (ons.platform.isIPhoneX()) {
32      document.documentElement.setAttribute('onsflag-iphonex-portrait', '');
33      document.documentElement.setAttribute('onsflag-iphonex-landscape', '');
34    }
35  </script>
36</head>
37<body>
38  <ons-page>
39    <ons-toolbar>
40      <div class="center" id="toolbar-title"></div>
41    </ons-toolbar>
42    <ons-tabbar position="bottom">
43      <ons-tab label="Tab 1" page="tab1.html" active>
44      </ons-tab>
45      <ons-tab label="Tab 2" page="tab2.html">
46      </ons-tab>
47    </ons-tabbar>
48  </ons-page>
49
50  <template id="tab1.html">
51    <ons-page id="first-page">
52      <p style="text-align: center;">
53        This is the first page.
54      </p>
55    </ons-page>
56  </template>
57
58  <ons-template id="tab2.html">
59    <ons-page id="second-page">
60      <p style="text-align: center;">
61        This is the second page.
62      </p>
63    </ons-page>
64  </ons-template>
65</body>
66</html>

試したこと

見やすいようにbodyタグはbackground-colorはblackに設定しています。
１．初期の縦表示（下に余白あり）から横画面で表示した後、再び縦画面で表示すると、余白がなくなる。

２．下記のコメントを参考にmetaタグのviewportのタイプをautoにしたところ、タブバーの余白はなくなったがツールバーの上部に余白ができた。
index.html3行目のviewport-fit=cover → index.html3行目のviewport-fit=auto
iPhoneX縦表示用のパッチ有効:index.html　32行目

３．viewport-fit = cover + iPhoneX縦表示用のパッチ未使用の場合
index.html3行目のviewport-fit=cover
index.html32行目を削除した状態

行動規範の内容に同意します

回答2件

縦向き表示用iPhone Xパッチが適用されているように見えます。

https://ja.onsen.io/v2/guide/iphonex.html

投稿2020/04/30 01:12

otak-lab

総合スコア276

todayyy

2020/04/30 09:13

コメントありがとうございます。縦向き用表示用に原因があるのかmetaタグのviewportのタイプに原因があるのか分かりません。viewportをautoにしたところtabbarは正常な位置に戻りましたがons-toolbarの上部に余白ができてしまいます。。。謎です。

行動規範の内容に同意します

自己解決

monaca:テンプレートでOnsenUIを作成
↓
iosアプリ設定でWebViewエンジンをWKWebViewに変更
↓
index.html:3行目のmetaタグにあるviewport-fit=cover をviewport-fit=auto に変更
↓
index.html:32行目のdocument.documentElement.setAttribute('onsflag-iphonex-portrait', '');
を削除したところ理想通りに表示できました。

下記のサイト教えてくれたotak-labさんありがとうございました。
WEWebViewの機能と関係していました。
Monacaのiosアプリ初期設定ではWebViewエンジンがUIWebViewなのですが、それでも空白ができていたのは少し謎ですが、とりあえずよかったです。

ただ横画面にした場合は左右に白の余白ができてしまうので横画面で使用する場合はまた別の方法が必要になるかと思います。

iphone-x-に対応したモバイルサイト-cordova-アプリの作り方と注意点

UIWebView では viewport-fitの autoの値が containを指しているため、 cover に変更する必要がありました。しかし、WKWebView では viewport-fitの autoの値が初めから coverを指しています（筆者により検証）。そのため、WKWebViewでは第1の問題が初めから修正されており、viewport-fit=cover を設定する必要がありません。