ちなみに、今、ちょっと、親テーマに切り替えて、iphoneで見てみたのですが、親テーマでも、横スクロールバーは表示されませんでした。

ローカルに新しいテストサイトを作って、Cocoonでソースコードを表示させてみたのですが、やはり、同様の症状で、PCでの表示や、PCでのスマホのシュミレーションでは、横スクロールバーが表示され、iphoneでは、表示されず、折りかえされてしまいます。

エディターは、GutenbergをOFFにし、code タグは使用せず、pre タグのみでテストしてみました。

ローカルのテストサイトで、Cocoonから、WordPress公式テーマの Twenty Seventeen に変えて表示してみたのですが、こちらでも、同様の症状になるため、ソースコードに pre タグが出力されていないのかとソースコードを見てみると、ちゃんと ソースコードには、pre タグがあるようです。

でも、Cocoonのソースコードの表示の案内のページでは、スクロールされるというのは、どういうことなのだろう？

WordPressのバージョンが違うため？

んー、よくわからないです。

Twenty Seventeen の場合は、元々、横スクロールバーを表示させるような仕様には、なっていないみたいでした。

お粗末さまです。

どうやら、原因は、２つ。

code タグを pre タグの中に挟んでいたこと。

もう一つは、Cocoonに組み込まれている、「highlight.js」らしい。

code タグを外し、Cocoon設定の「コード」タブの「ハイライト表示」のところの「ソースコードをハイライト表示」のチェックを外すと、iphoneでも横スクロールバーが表示されました。

私の使っていた、ハイライトスタイルは、「atelier-dune-light」。

ただ、「highlight.js」の、どのCSSコードが、障害になっていたかは、まだ、わかりませんが・・

ご連絡ありがとうございます。

とりあえず、iPhoneとIEだと完全にiPhoneに優先なので、元に戻しました。
------------------------------------------------
https://github.com/yhira/cocoon
最新ファイルをダウンロードする場合は、上記ページのダウンロードボタンからzipファイルをダウンロードしてください。

FTPでのアップデート方法はこちら。
https://wp-cocoon.com/ftp-update/
------------------------------------------------
結局のところ、IEユーザーは少ないですし、IEのウィンドウをそこまで細くして見る人も少ないので、このままでもいいのかなと思います。

@yhira さん

今、バージョン2.1.6.1 をインストールしてみたのですが、iphone の表示は改善しません。

調べた記事によっては、むしろ、iphoneでも pre タグに word-wrap: normal; を指定することで改善するという内容のものもありました。

なので、これは、先日の Internet Explorer 11 の件とは、別のものと思われます。

たまたま、気づいたのが同時期ということのようです。

このCocoonのサイトの環境と私のサイトの差分にヒントがありそうです。

@yhira さん

やっと原因がわかりました。

親テーマの以下の初期化の指定が関係していました。

/************************************
** 基本表示
************************************/
/*初期化*/
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

全称セレクタを使っているので、pre タグの子孫である、code タグや、「highlight.js」によって挿入される、span タグにも、初期化の指定が有効になってしまっていたのです。

なので、以下のCSSを設定することにより、子孫である code タグや、span タグの改行を止めることができ、横スクロールバーが表示されるようです。

.entry-content pre * {
    word-wrap: normal;
}

全称セレクタの使い方も難しいですね。

まとめて、書くと・・

.entry-content pre,
.entry-content pre * {
word-wrap: normal;
}

こんな感じでしょうか。

そうだったんですね！
詳しく調査までしていただいて、ありがとうございます湿気マーク
取り急ぎ、ちょっとでもCSSを削減するため以下のように書き換えてアップしてみました。
https://github.com/yhira/cocoon/commit/1169c226195f49f0dabdf17bcf695c727a155cff#diff-da232d78aa810382f2dcdceae308ff8eR1417

@yhira さん

早々に修正いただき、ありがとうございます。

バージョン2.1.6.3をインストールして、iphoneで表示したところ、ちゃんと横スクロールバーが表示されました。

もちろん、Internet Explorer 11 でも横スクロールバーは、表示されています。

理屈を考えれば、私も、もう少し、早く気がついてもよさそうなものでした。 ? 

わいひらさんのコードの方が、pre タグは、漏れなく全部、ということで、良いと思います。

あ、Internet Explorer 11の方のトピックにもこのトピックのリンクを貼っていただければと思います。

ご確認いただきありがとうございます！
トピックの方にもリンクを貼り付けておきました。