ステータスバーがbodyにかぶる機種の判別について

Question

###前提・実現したいこと
MONACAで初めてスマホアプリ作成を始めた初心者です。
「最小限のテンプレート」でCSSを下記のようにして画面いっぱいにコンテンツを埋めiPhone SEとAQUOS SH-M02で実機デバッグしたところ、AQUOS SH-M02ではきれいに表示されるのにiPhone SEではステータスバー（画面上部の回線状態やバッテリー残量の表示部分）が覆いかぶさります。

body, html {
        width: 100%;
        height: 100%;
        padding: 0px;
        margin: 0px;
}

TOPのマージンをセットする必要があるのでしょうが、その対象が分かりません。
趣味と勉強をかねて始めたばかりで、試せる実機も限られています。
既にどこかに情報まとめられてますでしょうか。

よろしくお願いいたします。

###試したこと
jQuery TODO Appテンプレートでも同様に文字がかぶったのでstyles.css
に下記のように.ua-ios-10の記述を追加したところ、きれいに表示されるようになりました。
os9も追加した方がいいのでしょうか？それともSEだけに絞る必要あるのでしょうか？

/* set padding for iOS7 status bar */
.ua-ios-7 .ui-page, .ua-ios-8, .ui-page, .ua-ios-10 .ui-page {
    padding-top: 63px !important;
}

.ua-ios-7 .ui-header, .ua-ios-8 .ui-header, .ua-ios-10 .ui-header {
    top: 20px;
}

Onsen UIを使えば大丈夫かなと思いましたが、Onsen UI V2 JS Minimumでは文字がステータスバーとかぶりました。
（body内のThis is a template for Onsen UI app.とdocomoの文字がかぶさり文字の判別ができない状態です）

###補足情報(言語/FW/ツール等のバージョンなど)
クラウドIDEとそのテンプレートを使っています。

Comments

[akabee]

教えてください。「ステータスバー」とは何でしょうか？また、OnsenUIを使った時の「文字」というのもなんなのか気になります。

[idic]

ご指摘ありがとうございました。追記しました。

[akabee]

なるほど。OSのステータスバーですか。「CSSを下記のようにして画面いっぱいにコンテンツを埋め」とありますが、この部分は必須なのでしょうか？恐らく、それがフレームワークとして想定されていないのではないかと思います。OnsnUIについては、bodyやhtmlはそもそも意識しないような作りになっていますし・・。一度その部分を削除して上手くいけば、その方向で開発を続けるのは可能なのでしょうか？

[idic]

ヒントありがとうございました。Onsen UIを使った場合はons-pageの中に入れると解消されました。使わない場合はCSSの、パディングやマージンを消すと、iPhone SEでは少し文字が重複しAQUOSでは余分な空白が、できます。勉強をかねてもう少し調査したいと思います。

[akabee]

解消に向かいましたか、良かったです。基本的なことの確認も込めて回答記載しておきます。

Answer 1

修正依頼欄で解決に向かっているようで良かったです。
CSSを使いこなしておられるあたり、monacaでの開発経験は長くないかもしれませんが、Webシステムの開発経験はそれなりにおありなのかなと予想しています。

monacaでの開発にはcordovaというフレームワークを前提に作られています。cordovaとはHTML等のWebアプリ開発の技術を用いてAndroid等のアプリが作れるというものです。
ここで注意しなければならないのは、cordovaの開発はWebアプリの開発とは完全にイコールではないということです。特に画面の挙動は端末ごとに非互換も大きいようです。

それを解決するために提供されているのがmonacaでも提供されているOnsenUI等のUIフレームワークです。
自分でゴリゴリCSSを書くよりも、むしろCSSを何も書かずに生のOnsenUIを用いるほうが各端末での表示が揺れることもなく綺麗に表示されるかと思います。それを専門に作られていますからね。
画面サイズに合わせて要素の伸縮もいい感じにやってくれます。

上記のような認識がおそらく無い状態で開発を行っておられて、CSSなどの知識があるためにこのような質問に繋がったのではないかと予想しますが、特にこだわりがなければ基本的にはUIの構成にはOnsenUIをそのまま利用、微調整としてCSSを用いるというような考え方で進められるのが良いかと思います。
OnsenUIが気に入らなければ、ほかにも同様のUIフレームワークはあります。（ionicなど）

Comments

[idic]

ありがとうございます。ionicも含め色々試して見たいと思います。
今回は最初のアプリなので、簡単に１ページのみの電卓アプリを作ろうとして、フレームワーク使うほどではないと判断しました。最初に選んだ課題が間違っていたようですね(^^;)

Answer 2

internal.js内に下記のような記述を見つけました。
（違っていたらすみません）

internal.shouldFillStatusBar = () => internal.isEnabledAutoStatusBarFill() && platform.isWebView() && platform.isIOS7above();