TOP MathJaxの数式をスマホではみ出ないように表示する

MathJaxの数式をスマホではみ出ないように表示する

プログラミング 数学 Web
作成日時:2019年7月6日(土) 7時40分
更新日時:2019年7月29日(月) 20時48分
MathJaxを導入してPCではうまく表示できたが、スマホで見てみると数式が画面外にはみ出ていた。

解決方法

はてなでtex書いている人たちへ…数式が長くてスマホだとはみ出るときの対処法
この記事を参考にスタイルにoverflow-x: auto;を追加したがうまくいかず。

divにwidthを250pxなど具体的に指定するとうまくいく。
しかし250の値を直打ちするのは良くない。

レスポンシブデザインにしていたので
grid-template-columns: [left] 5px [main-start] 1fr [main-end] 5px [right];
のようにしていたのを
grid-template-columns: [left] 1fr [main-start] 300px [main-end] 1fr [right];
とするとうまく表示できた。

しかし、300pxのところが直打ち。これでは少し大きめの横幅だとサイドが空いてしまう。
そこで300pxのところを95vw(画面横幅の95%)にしたところ全てうまくいった。

結局

結局grid-template-columnsで1frと指定すると内容に合わせられるので、具体的な大きさが決まるようにする必要がある。
vwは画面幅に対しての比率なので具体的なピクセル数が決まるので、今回はうまくいった。

最新記事


残り少ない今年にやっておきたいこと
勉強心得(自分用)
今後の勉強方針と勉強すること