スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

画面表示をスマホの画面に合わせるviewportの設定

viewportについて

viewportとはブラウザーの表示領域の事を言います。

スマートフォンの画面の横幅は320ピクセル程度ですが、
1画面表示に関して980ピクセルまで表示できるようになっています。
その為、横幅を320ピクセルに合わせて作成していると縮小された形で表示されます。
その例が以下の画像です。

20131214_1.jpg 

これでは字が小さすぎて読めません。
見やすくスマホらしい画面にするにはviewportの値を変更する必要があります。
スマートフォンの横幅に合わせて初期ズームをなしにする設定はmetaタグで以下のように記述します。

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


これによりvewiportの値と実際の横幅が一致し縮小表示されなくなります。
設定後の表示は以下の通りです。

20131214_2.jpg
スポンサーサイト

スポンサードリンク

最新記事

最新コメント

プロフィール

かっこいいデザイン、にぎやかなデザイン、きゅ~となデザイン、シンプルで洗練されたデザイン。
想像するだけで心がモワモワしてきます♪
いいデザインにいっぱい出会いますように★

好きな言葉は、旋律と色彩

ブログランキングに参加しています。こちらにも是非♪

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。