iOS・Androidアプリ開発で便利なOnsen UI。
これを使えば、iOSとAndroidのアプリを１つのソースコードで開発することができます！
Onsen UI 2: HTML5モバイルアプリを速く、美しく
HTML5とJavaScriptで美しいハイブリッドアプリを開発。jQuery、AngularJS 1とAngular 2+、React、Vue.jsなどのフレームワークに対応。iOSとAndroid向けクロスプラットフォーム開発。
ja.onsen.io
ただ、スマホのOSが新しくなった際に、
それに対応するための施策を行う必要がある場合もあって、
それはそれで大変です💦
今回はその問題の１つ、ons-tabbarの下に余白ができる時の対処法をお伝えします。
解決法
index.html ６行目の以下の部分
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover">このviewport-fitの部分をcover→autoに変更すると、余白がなくなります！
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=auto">参考：https://teratail.com/questions/257540
皆さんもぜひお試しください！
コメント