CSS

viewportの設定

スマートフォンでも適切な表示ができるようにviewportの設定をしていきます。

  • デベロッパーツールの起動
  • viewportの設定

デベロッパーツールの起動

・Chrome だったらこちらの三点メニューの「その他のツール」、「デベロッパーツール」と行ってあげるとデベロッパーツールを開くことができます。

・ケータイのアイコンをクリックしてあげると他の機種でどのような表示をするのか確認することができます。

・スマートフォンでは PC サイトを快適に見るためにデフォルトではわざと広めに表示領域を取っているため小さく表示されます。

viewportの設定

・ヘッドの中にメタタグのネーム属性をビューポートにしてコンテンツ属性を width=device-width にしてあげます。こうするとスマホの画面幅に表示領域を合わせてくれます。

・最初のズーム設定を等倍にしておきたいので、そのあとに , initial-scale= 1 という設定もいれて置きます。

-広告-

 

 






-CSS