\r\n \r\n\r\n \r\n \r\n \r\n \r\n\r\n \r\n\r\n\r\n \r\n \r\n
\r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n\r\n \r\n\r\n \r\n \r\n

\r\n This is the second page.\r\n

\r\n
\r\n
\r\n\r\n\r\n```\r\n\r\n### 試したこと\r\n見やすいようにbodyタグはbackground-colorはblackに設定しています。\r\n**1.初期の縦表示(下に余白あり)から横画面で表示した後、再び縦画面で表示すると、余白がなくなる。**\r\n\r\n![イメージ説明](5970ac8ffa541bd57e0d90ea2944367f.png)\r\n\r\n**2.下記のコメントを参考にmetaタグのviewportのタイプをautoにしたところ、タブバーの余白はなくなったがツールバーの上部に余白ができた。**\r\nindex.html3行目のviewport-fit=cover → index.html3行目のviewport-fit=auto\r\niPhoneX縦表示用のパッチ有効:index.html 32行目\r\n\r\n![イメージ説明](fb9e2130d4c44dc6c57a68fbd8f423c0.png)\r\n\r\n**3.viewport-fit = cover + iPhoneX縦表示用のパッチ未使用の場合**\r\nindex.html3行目のviewport-fit=cover\r\nindex.html32行目を削除した状態\r\n\r\n![イメージ説明](10f91dd50104157cc4ed377e34ea8b7c.png)","answerCount":2,"upvoteCount":0,"datePublished":"2020-04-29T16:46:27.496Z","dateModified":"2020-04-30T09:38:16.997Z","acceptedAnswer":{"@type":"Answer","text":"> monaca:テンプレートでOnsenUIを作成\r\n> ↓\r\n> iosアプリ設定でWebViewエンジンをWKWebViewに変更\r\n> ↓\r\n> index.html:3行目のmetaタグにあるviewport-fit=cover をviewport-fit=auto に変更\r\n> ↓\r\n> index.html:32行目のdocument.documentElement.setAttribute('onsflag-iphonex-portrait', '');\r\n> を削除したところ理想通りに表示できました。\r\n\r\n下記のサイト教えてくれたotak-labさんありがとうございました。\r\nWEWebViewの機能と関係していました。\r\nMonacaのiosアプリ初期設定ではWebViewエンジンがUIWebViewなのですが、それでも空白ができていたのは少し謎ですが、とりあえずよかったです。\r\n\r\nただ横画面にした場合は左右に白の余白ができてしまうので横画面で使用する場合はまた別の方法が必要になるかと思います。\r\n\r\n[iphone-x-に対応したモバイルサイト-cordova-アプリの作り方と注意点](https://medium.com/@n_matagawa/iphone-x-%E3%81%AB%E5%AF%BE%E5%BF%9C%E3%81%97%E3%81%9F%E3%83%A2%E3%83%90%E3%82%A4%E3%83%AB%E3%82%B5%E3%82%A4%E3%83%88-cordova-%E3%82%A2%E3%83%97%E3%83%AA%E3%81%AE%E4%BD%9C%E3%82%8A%E6%96%B9%E3%81%A8%E6%B3%A8%E6%84%8F%E7%82%B9-7f04bf24df80)\r\n\r\n> UIWebView では viewport-fitの autoの値が containを指しているため、 cover に変更する必要がありました。しかし、WKWebView では viewport-fitの autoの値が初めから coverを指しています(筆者により検証)。そのため、WKWebViewでは第1の問題が初めから修正されており、viewport-fit=cover を設定する必要がありません。\r\n\r\n\r\n![イメージ説明](3575e7c966a1d616646c30ef468b3356.png)","dateModified":"2020-04-30T10:07:51.983Z","datePublished":"2020-04-30T10:07:51.983Z","upvoteCount":0,"url":"https://teratail.com/questions/257540#reply-370842"},"suggestedAnswer":[{"@type":"Answer","text":"縦向き表示用iPhone Xパッチが適用されているように見えます。\r\n\r\n[https://ja.onsen.io/v2/guide/iphonex.html](https://ja.onsen.io/v2/guide/iphonex.html)","dateModified":"2020-04-30T01:12:24.531Z","datePublished":"2020-04-30T01:12:24.531Z","upvoteCount":1,"url":"https://teratail.com/questions/257540#reply-370667","comment":[{"@type":"Comment","text":"コメントありがとうございます。縦向き用表示用に原因があるのかmetaタグのviewportのタイプに原因があるのか分かりません。viewportをautoにしたところtabbarは正常な位置に戻りましたがons-toolbarの上部に余白ができてしまいます。。。謎です。","datePublished":"2020-04-30T09:13:27.832Z","dateModified":"2020-04-30T09:13:27.832Z"}]}],"breadcrumb":{"@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"トップ","url":"https://teratail.com"},{"@type":"ListItem","position":2,"name":"iOSに関する質問","url":"https://teratail.com/tags/iOS"},{"@type":"ListItem","position":3,"name":"iOS","url":"https://teratail.com/tags/iOS"}]}}}
質問するログイン新規登録
iOS

iOSとは、Apple製のスマートフォンであるiPhoneやタブレット端末のiPadに搭載しているオペレーションシステム(OS)です。その他にもiPod touch・Apple TVにも搭載されています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Onsen UI

HTML5で記述されたモバイルアプリの高速化、およびネイティブアプリライクなUIが作れるフレームワーク。 様々なJavaScriptフレームワークと併せて使用することができます。スマートフォン向けアプリ、Webサイトに必要なアニメーション、UI/UXを実装することが可能になります。

Monaca

「Monaca」はiOS、Android、Windows向けのアプリ開発に対応した、Cordovaベースのモバイルアプリ開発プラットフォームです。HTML5、JavaScriptといったWeb標準技術を用いてモバイルアプリ開発を行うことができます。

Q&A

解決済

2回答

6416閲覧

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

todayyy

総合スコア31

iOS

iOSとは、Apple製のスマートフォンであるiPhoneやタブレット端末のiPadに搭載しているオペレーションシステム(OS)です。その他にもiPod touch・Apple TVにも搭載されています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Onsen UI

HTML5で記述されたモバイルアプリの高速化、およびネイティブアプリライクなUIが作れるフレームワーク。 様々なJavaScriptフレームワークと併せて使用することができます。スマートフォン向けアプリ、Webサイトに必要なアニメーション、UI/UXを実装することが可能になります。

Monaca

「Monaca」はiOS、Android、Windows向けのアプリ開発に対応した、Cordovaベースのモバイルアプリ開発プラットフォームです。HTML5、JavaScriptといったWeb標準技術を用いてモバイルアプリ開発を行うことができます。

0グッド

0クリップ

投稿2020/04/29 16:46

編集2020/04/30 09:38

0

0

開発環境

プラットフォーム: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に設定しています。
1.初期の縦表示(下に余白あり)から横画面で表示した後、再び縦画面で表示すると、余白がなくなる。

イメージ説明

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

イメージ説明

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

イメージ説明

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

縦向き表示用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の上部に余白ができてしまいます。。。謎です。
guest

0

自己解決

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 を設定する必要がありません。

イメージ説明

投稿2020/04/30 10:07

todayyy

総合スコア31

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.29%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問