アイコンを画面中央に配置したい
今回のWebアプリはスマホサイズ限定ということもあり、TOP画面はアイコンを中央に配置したデザインにしていました。
デザインを終えいざコーディングに入ってみると、アイコンが思ったように中央にいかずかなり苦戦しました…
最終的に以下のコードで解決することができました。
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
アドレスバー分のはみ出しをなくしたい
画面目一杯（高さを100vhで指定）になる想定でコーディングしていたのですが、スマホで確認してみると無駄なスクロールができることに気が付きました。
調べてみると、スマホの場合だとアドレスバーなしのサイズを100vhとするらしく、そのせいではみ出していたようです。
vhとは
ビューポートの高さ（ブラウザのウィンドウの高さ）を基準として割合で指定できる単位になります。
1vhを1％として、1～100vhの数値を指定することができます。
例えば、ビューポートの高さが「1000px」だった場合は、「100vh」だと「1000px」、「50vh」だと「500px」となります。
他にもビューポートの幅を基準とするvw、vminやvmaxなどがありますので、興味がある方は是非調べてみてください。
解決策としてjQueryでアドレスバーを除いた高さを取得するようにしました。
$(window).height();
「.height()」の要素に「window」を指定することで、アドレスバーを除いたウィンドウの高さを取得することができます。
コードを実装し、いざ確認！！したのですが、いくら更新しても管理者ツールでキャッシュの削除やハード再読み込みをしても解決しませんでした…
コードを確認しても変なところはないし、ファイルの更新忘れでもない…悩みに悩んだ結果、先輩に確認していただいたところ外部スクリプトの読み込み位置が原因でした。
<head>内で読み込んでいたのが原因で、読み込み位置を変えたら無事解決しました（初歩的なミスでお恥ずかしい(*ﾉωﾉ)）
最後に
今回は、Webアプリ制作時のつまずいたところと解決策についてまとめさせていただきました。
外部スクリプトのファイルが上手く適用されないときは、読み込み位置を見直してみるとあっさり解決するかもしれませんよ。
以上、オオブでした。
