Enlighterでinlineコードをモバイルで表示時、2行になる場合の対処

Enlighterを使用してコードを表示は、技術系ブログならよくあると思います。しかし、モバイルでinlineコードを表示すると、以下のように2行表示になってしまう場合があります。

原因

モバイル表示時に、デバイス側で文字の大きさが自動調整されるためです。この自動調整と、ブラウザ側の処理が噛み合わないとこのようになります。

解決法

CSSで、text-size-adjustを調整します。

* {
    -webkit-text-size-adjust: none; /*または100%にする*/
    text-size-adjust: none;
}

これにより、デバイス側での文字サイズの自動拡大がなくなるため、改行されずに済みます。

デバイス側で色々設定している場合にUXは下がらないか?

MDNの情報によると、

上記に示すとおり、適切に設計されたレスポンシブサイトでは、text-size-adjustの動作は必要ありませんので、開発者はnoneの値を指定してこれをオフにすることができます。

とあります。レスポンシブを意識してサイトを組んでいればnoneや100%などで良いということになります。

もし心配であれば、

.enlighter-v-inline .enlighter-text {
    word-wrap: normal;
}

も追加で指定しておいても良いかもしれません。ただし、はみ出した場合に横の文字に被る場合があります。