スマホで見ると表示が崩れるときはviewportを弄ってみる

不覚にも夏風邪に倒れてしまった yuka です:cat_8:
もう症状も軽くなったので、マスク着用で出社しています。
夏にひく風邪は飛沫感染しないそうですが、念のため。
今まであんまり気にしたことなかったんですが
冬にひくのと夏にひくのでは、原因になるウイルスのタイプが全く違うんですってね・・・。

話はかわって、スマホでホームページを見たときのレイアウト崩れに関して。

PCで表示したときは大丈夫なのに、スマホだとズレてる。
画像を背景にしている箇所がうまく表示されない。
そういった場合は、viewportの指定を変えてみると、改善するかも知れません:wa-i:
viewportは、表示領域(描画範囲)を指定するmeta要素です。
たとえばコレが

<meta name="viewport" content="width=device-width" />

となっていると、表示するデバイスに合わせて領域が変わります。
width=device-width の部分です。
ここをサイトの全体幅に合わせて書き換えてみます。(↓は全体幅1000pxの場合)

<meta name="viewport" content="width=1000, user-scalable=yes," />

こうすると1000px幅で表示されるようになって、表示が崩れなくなるという。
ちなみにuser-scalableは、スマホでのピンチイン/アウト(拡大縮小)を許可するかどうかの設定です。

cssとか直しても無理!って諦めかけてたりしたら、試してみてください:sayonara:

トラックバックURL