スキップしてメイン コンテンツに移動

レスポンシブ対応ならばサイトを画面幅に合わせられた

デバイスでサイトのレイアウトを保持するにはmetaタグでviewportを設定すれば良い。


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

html編集のhead内に追加すると画面幅に合わせてサイトが表示されるので、デバイスが変わってもデザインが崩れることはなくなるんだ。


レスポンシブ対応といわれる。Googleのビューポートを設定するによればソースコードを、一行、追加するだけで、とても容易い。


画像はcssでwidthを100%など画面に収まるように指定しなくてはならないにせよ、スマホでサイトのコンテンツが小さく表示されてしまうような事態は避けられる。


metaタグのviewportは本当に有り難いと思う。サイト作成でオススメしておきたい。

コメント

些細な日常の人気の投稿

MOTOROLAのMoto G5 Plusを使い出してのスマホレビュー

Imgurで画像URLと埋め込みコードを取得する方法

PlayストアでAndroidアプリのダウンロードが非常に遅い場合の打開策