モバイル端末のための css <pre> と <code>

（老いぼれ人工知能研究者のプログラミング日記）

2019年7月14日

Google Search Consoleから、
「貴サイトに影響するモバイル ユーザビリティの新たな問題が 3 件検出されました。」
というメールが来ました。

「コンテンツの幅が画面の幅を超えています」
というのが主な問題でした。

これは、htmlファイルの中で、<pre> <code>を用いて、コードを記述していたからです。
コードの中に、長い行があって、モバイル端末のウィンドウからは、はみ出してしまっていました。

「html for mobile device pre code」というキーワードで検索してみましたら、次のページが見つかりました。
`having trouble with <pre><code> on mobile - Stack Overflow'

このページに載っている通り、cssを pre{white-space:pre-wrap; word-wrap:break-word; overflow:auto;} と変更してみましたら、私の場合もうまくいきました。

To the extent possible under law, the person who associated CC0 with this work has waived all copyright and related or neighboring rights to this work.