KONOTI

この世界で得た知識・情報まとめ

【HTML / metaタグ】viewportの使い方・書き方まとめ

HTMLにおけるmetaタグの1つ、viewportの使い方や書き方のまとめです。 最も重要なことを簡潔にまとめてあります。

Point

①スマホ画面で見やすくする

viewportとは

viewportとはスマホでの見え方を最適化するmetaタグです。 スマホが普及した現在では、必須のmetaタグとなっています。

具体的にどのように最適化するのかというと、スマホで見る横幅を指定することで、 小さい画面でもうまく見えるようになります。

後ほど書き方はご紹介しますが、横幅の指定方法は数値で指定する方法と、汎用的な指定方法があります。 スマホの画面サイズは様々なので、汎用的な指定方法が推奨されます。

viewportの使い方

viewportはスマホでアクセスされる可能性があるページに対して使います。 2017年12月現在、スマホからの検索がPCからの検索を超えており、Googleはスマホ検索をメインにすると公言しました。

よって、全てのページに対して設定するべきmetaタグといえます。

viewportの書き方

viewportは以下のように、HTMLでheadタグ内に書きます。


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

このままコピペで使用できます。 widthをどのスマホ画面サイズでも対応できるように「device-width」としています。

この記事のシェアはこちらから

当サイトについて

当サイト(KONOTI)は、日常生活において運営者が得た情報をご紹介するサイトです。 ジャンルに多少の偏りはありますが、基本的には様々な情報を取り扱っていく予定です。

Contact

当サイトへのご連絡は以下よりお願いします。

PAGE TOP ▲

© Copyright 2023 KONOTI