やりたかったこと
ブラウザのフォントサイズの設定に合わせて、文字サイズが変わるサイトにしたかった。
何もしないとブラウザの設定を変更しても文字サイズは同じまま。
原因
Vuetifyがデフォルトでhtmlに対してフォントサイズを設定していた
html {
font-size: 16px; 👈
overflow-x: hidden;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
解決策
index.html の html要素に直接指定して書き換える
public/index.html
<!DOCTYPE html>
<html lang="ja" style="font-size:initial;"> 👈
(略)
</html>
一部書き換わってくれないコンポーネントがありましたが、
今回は気にならない部分だったのでとりあえずこれでよし。