スマホでURLを記載する場合はレイアウト崩れに注意が必要

URLをページに記載していることが原因で、スマホで表示したときにレイアウトが崩れたのでメモ。

1行におさまらないURLを記載している場合、スマホでは改行されずにカラム幅が広がります。PCの場合は、カラムが広がるというより、カラムを無視して突っ切って行く感じです。

これはスマホ特有の対応というわけではなく、word-wrapにbreak-wordを指定します。ちなみに、以下の記事を参考に解決しました。

スマホ対応するならCSSでword-wrap:break-wordを指定しよう | kudox.jp

table内で記述しているときは注意が必要

今回のケースでは、table内にレイアウト崩れの原因となるURLを記載していたので、「word-wrap:break-word」だけでは解決しませんでした。

この場合も上の記事に書いていました。内包しているtableに「table-layout:fixed;」を指定すれば良いと。

ただ、試してみたんですが、これでもダメ……。変化なしでした。

最終的に、追加で「word-break:break-all」も指定することで解決しました。「word-wrap:break-word」も「word-break:break-all」も、英単語の途中でも改行する指定なのであわせて指定しても問題はないかと。

まとめ

今回のはiPhoneでPC用ページを表示した場合に、遭遇した事象です。たぶん、このケースは多い気がします。

PCでは1行でおさまって問題なく表示されているので、対応をスルーしてしまいがち。スマホではカラム幅と文字サイズのバランスが変わりますから、URLを記載している場合は結構な確率でレイアウト崩れが発生しているんじゃないでしょうか?確認してみることをおすすめします。

ただ、検証ブラウザ、OSにスマホ関連が入っていなければ気にすることはないんですがね。私の場合も、検証対象外でした。でも、スマホページからリンクしているページでしたので、あわせて対応したという感じです。

しかし、スマホ表示時にレイアウトが崩れるケースって結構ありますね……。

公開:2013/07/24 | 更新:2013/12/16