itechblog https://blog.hatena.ne.jp/itechblog/ Webエンジニアのメモ帳 https://itechblog.hatenablog.com/ 技術メモ はじめに Webサイトを表示する時に、PCから表示するのとスマホから表示するのとで見た目が異なるように実装することはよくあります。 このような実装をするためには、cssファイルで「画面の幅が何px以上or以下ならこのように表示」といった設定を行います。 いわゆる「レスポンシブデザイン」という手法です。 しかし、それだけでは上手く動きません。HTMLファイルに以下の文章を記述する必要があります。 <meta name="viewport" content="width=device-width,initial-scale=1"> 意味が分からなくても、とりあえずコピペすれば動くには動くのですが、… 190 <iframe src="https://hatenablog-parts.com/embed?url=https%3A%2F%2Fitechblog.hatenablog.com%2Fentry%2F2021%2F02%2F01%2F2021-02-01-211000%2F" title="スマホ表示で設定する「ビューポート」について - Webエンジニアのメモ帳" class="embed-card embed-blogcard" scrolling="no" frameborder="0" style="display: block; width: 100%; height: 190px; max-width: 500px; margin: 10px 0px;"></iframe> Hatena Blog https://hatena.blog 2021-02-01 21:10:00 rich https://itechblog.hatenablog.com/entry/2021/02/01/2021-02-01-211000/ 1.0 100%