スマホサイトでの横幅調整 パソコン用サイトをスマホ対応にするTips

0 google+0 はてなブックマーク0
2014年5月20日5:35 PM|モバイルサイト

PCサイトをスマホやタブレットで閲覧した時。
やたら小さく表示されて、右側に空きが出る事があったりする。

そんな時は、metaタグで画面サイズを指定するといいかも。

iPad miniで時々、自分のメインブログを閲覧していると…。
何故か、右側に大きな空きができてしまう。

原因は、PC向けのサイトをスマートフォンが表示した時、画面サイズを大きく認識するため。
こういう時は、viewportを設定を入れれば大抵解決。

設定といっても簡単。
HTML内の<head></head>のどこかに

<meta name="viewport" content="width=device-width,initial-scale=1.0">

を追加。これでOK。
横の空間はなくなるし、ページの拡大・縮小もそのまま可能。

今回は、普通のパソコン用サイトを表示するための調整のだけど。

書き方によっては、スマホ専用サイトで使いやすい記述方法もあったりする。
文字の大きさはそのままで、縦向き横向きに対応もできるので便利かも。

詳しくは、以下がとても判りやすいです。

参考サイト
これがスマートフォン向けサイトを作るときの viewport 設定3パターンだ - てっく煮ブログ

スマートフォンやタブレットで見ることも多いので、書いておきたい設定だと思う。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です