現在開発しているTik Tokクローンアプリについてです。
開発時にWEBブラウザ上でレスポンシブチェックをすると綺麗に出来ておりますが、いざスマホ実機でみるとズレが生じます。
新レスポンシブで構築しており下記のようなグループ配置をしております。
リピーティンググループ（動画再生画面）width100% height92%
フローティンググループ（ナビゲーションバー）width100% height8%
ズレの原因としてはGoogleChromeやSafariに標準で表示されているアドレスバー、下部のメニューバーがスクロールしても隠れてくれず、アドレスバー、メニューバーの表示込みで画面全体をheight100%として捉えられているのが原因かと思われます。
解決方法があればご教授いただけますと幸いです。
スマホではアドレスバーの高さを含んで100vh (100%) です。
ウェブアプリだとどうしても含まれてしまうので、
JavaScriptとCSSで調整するとうまくいくと思いますよ。
JavaScriptでは、アドレスバーを除く高さは「window.innerHeight」で取得できます。
これで取得した高さを、CSSで調整してみてください。
「スマホ 100vh メニュー」などでGoogle検索すると、たくさん方法がでてきます。
そしてFloatingGroupの高さは、%指定にすると端末サイズによって高さが変わってしまうのであまりよくないと思います…。
というのと、Bottom固定にされているかもご確認ください。
ありがとうございます。
下記記事を参考にさせていただいたのですが、Page is loadedでrun javascriptを組み込んでも取得されている気配が有りません。。。
Floating Groupに関してはpx指定、Bottom固定されておりましたので、私の勘違いでした。
JSで取得した値を使って、CSSでの調整が必要です。
JSでちゃんと値を取得できているかどうかは、console.log等を使いつつ確認を。
bubbleはエディタ上で配置しているエレメント以外にも、自動で必要なdivなどがたくさん生成されていくので、どのエレメントに対してCSSを当てるべきかは、ブラウザの検証ツールで細かく検証していく必要があります。
bubbleエディタで無駄なエレメントなどがある場合はエレメント数を最適化し、そこから検証ツールを使って試していく流れだと思います。
Settings → Generalタブに、以下のようなチェックボックスがあります。
これにチェックをいれると、各エレメントにIDを付与できるようになるので、こちらもご活用ください～。
ありがとうございます。
CSSも設定はしているのですがテンプレートに既に記述されているCSSとなりますので、ご指摘いただいたように一度解読して適切なエレメントに再設置していこうと思います。
