メモ(2018年7月28日)

ほぼすべてのページからclass属性がなくなった。残っているのはコード用のlanguage-*のみだ。なくすためにマークアップを見直していたりした。なくせるように無理やり変えたとも言う。language-*は消すと戻せそうもないので残しておいた。img要素のwidthheight属性は、定期的に消したくなるので消した。画像のサイズならどうにでもなる。

テキスト・サイズをこまめに変えるように変更した。16pxから24pxまで2pxごとに5段階に刻んだ。ビューポート幅が320pxから400px増えるごとに大きくなる。

手元では以下のように完全に計算でどうにかするパターンを試している。

html {
  font-size: calc((100vw - 320px) / 200 + 1rem);
}

ビューポート幅320pxを基準に、ビューポート幅が400px増えるごとに2pxずつフォント・サイズが増える。ユーザーのテキスト・サイズ設定が16pxで、ビューポート幅が1920pxだと、フォント・サイズは24pxになる。3840pxだと33.6pxだ!

良さそうだが、ユーザー設定をうまく反映していないような気もする。ユーザーが18pxに上げていた場合は、2.25pxずつ増やしてやりたい。calc()で単位を消して係数化できないので、実現は難しそうだ。ブラウザーにはテキスト・サイズとズームの設定が別々に存在することを考えると、テキスト・サイズの設定は固定数の増減であって倍率での拡大縮小ではないと考えられるので、この実装で良いのかもしれない。