やみとものプログラミング日記

人生気楽に。

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

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

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は画面幅に対しての比率なので具体的なピクセル数が決まるので、今回はうまくいった。

コメント

もしよろしければコメント下さい。

ハンドルネーム:
内容:

コメント一覧

最新記事

部分空間の定義と条件、生成元の定義
線形空間の基底の定義
線形空間(ベクトル空間)