PCサイトをスマホやタブレットで閲覧した時。
やたら小さく表示されて、右側に空きが出る事があったりする。
そんな時は、metaタグで画面サイズを指定するといいかも。
iPad miniで時々、自分のメインブログを閲覧していると…。
何故か、右側に大きな空きができてしまう。
原因は、PC向けのサイトをスマートフォンが表示した時、画面サイズを大きく認識するため。
こういう時は、viewportを設定を入れれば大抵解決。
設定といっても簡単。
HTML内の<head></head>のどこかに
<meta name="viewport" content="width=device-width,initial-scale=1.0">
を追加。これでOK。
横の空間はなくなるし、ページの拡大・縮小もそのまま可能。
今回は、普通のパソコン用サイトを表示するための調整のだけど。
書き方によっては、スマホ専用サイトで使いやすい記述方法もあったりする。
文字の大きさはそのままで、縦向き横向きに対応もできるので便利かも。
詳しくは、以下がとても判りやすいです。
参考サイト
これがスマートフォン向けサイトを作るときの viewport 設定３パターンだ – てっく煮ブログ
スマートフォンやタブレットで見ることも多いので、書いておきたい設定だと思う。
初めての方へ