やみとものプログラミング日記 やみとものプログラミング日記
TOP MathJaxの数式をスマホではみ出ないように表示する
MathJaxの数式をスマホではみ出ないように表示する

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

プログラミング 数学 Web
作成日時: 2019年7月6日
更新日時: 2019年7月29日
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は画面幅に対しての比率なので具体的なピクセル数が決まるので、今回はうまくいった。