PCにしか対応していないサイトをスマホで見た時、文字の改行位置を同じにする方法

更新日：2019年9月2日

スマホには対応していないPC向けサイトをスマホで見た場合、PCで見た時の状態を縮小したような形でスマホに表示されます。
しかし文字の改行位置が何故かPCで見た時とスマホで見た時とでは大きく違う場合があります。
これはスマホ側で勝手に文字のサイズを調整されて起こる現象です。
文字サイズが大きく調整されたり、あるいは小さく調整されることによって改行位置が変わってしまうということですね。

ではその解決方法ですが、まずはCSSで以下のように記述します。

body {
	-webkit-text-size-adjust: 100%;
}

スマホ側で勝手に文字サイズが調整されないように禁止する記述になります。
文字サイズが勝手に変わってしまっている箇所にピンポイントで指定してあげてもいいですが、
bodyに指定するのがベターでしょう。

次に以下の記述をheadタグの中に入れます。

〇〇〇の箇所はあなたのウェブサイトの全体の横幅に書き換えて下さい。例えば1000pxの場合は1000を入れて下さい。
pxは必要ありません。