ブラウザの文字の拡大縮小にMediaQueryを適用する。

最近、マークダウンでなんでも書いています。プレゼン資料もマークダウンです。だけれど、困ったことがあります。HTMLをブラウザで開いてプロジェクタに接続すると、文字が小さいんですね。そして、ついついブラウザのShift+；を押して、文字の拡大をしてしまいます。

文字を拡大すると、今度はWidthが合わなくなって横スクロールが出てきてしまう。

文字の拡大に対応させるには

ちょっとアレコレ調べて試してみたら、実はとても単純な方法で対応ができた。

単純にMediaquery で width を変えるだけだった。

     @media screen and (max-width:799px)  {
                       /* 以下は最大７９９ｐｘまで適用される。 */
            body{
                margin: 10px auto;
                padding: 10px;
                width: 500px;
                min-width: 300px;
                word-break: break-all;
            }


        }

意外とシンプルで拍子抜けた。