2020年1月19日(日)
ブラウザの拡大率に合わせるため #■子猫の手

　ブラウザの拡大率に合わせて入力フィールド幅の調整を試みています。

　計算でparseInt()ではなく、parseFloat()を使用すれば、かなり正確にできますが、ずれる倍率もあり、またブラウザごとに異なります。

　原因は、フォントサイズ指定において、小数点以下の取り扱い方が、ブラウザごとに異なるからです。

　フォントサイズを他のコンテンツと連動させるには、フォントサイズの単位をptではなく、pxにする必要があります。

　皮肉なことに、性能が良くないと考えていたIE11、MicrosoftEdgeが、パーフェクトに近い表現です。

　Safari(iOS10.3.3,iOS13.3)は、小数点第一位を四捨五入しています。

　Firefoxは、小数点第一位を四捨五入しています。しかし、小さいフォントの場合、9と10、11と12、13と14、15と16、17と18、19と20、21と22が同じサイズで表示されます。23px以上は問題ありません。まあ、今回行いたいことは拡大なので、支障は小さいものです。

　GoogleChromeとOperaは、17.47pxと17.5pxが同じフォントサイズなのに、17.48pxと17.49pxの幅がそれらよりも大きいという致命的なバグが確認できました。小数点第ニ位の処理にバグがあると推測できます。

　すべてのブラウザで問題を生じさせないためには、一行で40文字分(640px)と22文字(360px)の実測値をフィードバックします。px単位でフォントサイズを整数化して、入力幅を決めれば良いことになります。

　さっそく取り掛かりましょう。これがピシッと決まらないと、新レイアウトもつまらないものになってしまいますから。


P.S.フォントをpx単位で制御することは不可能と結論付けました。em単位で妥協することにしました。その方が、プログラムもシンプルになります。