鶏口牛後な日々

魔法使い(なんでも作れるエンジニア)を目指してます。ブログは発散中

HTMLのmetaタグの呪文について一応理解するためのメモ

PHP Laravelのデフォルトで入っている、welcome.blade.phpを使い回しするのですが、metaタグによくわからない呪文が入っていて、あとで聞かれた時のために一応調べたのでメモしておきます。

呪文は以下の二種。


<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">


1つ目、http-equiv="X-UA-Compatible" ウンタラカンタラ。
こちらは、ざっくりいうと、IEではバージョンが低いブラウザを使用しているユーザーが見た時に、レンダリング方法をその低いバージョンに合わせて変えないで! という命令らしい。
これを入れないと、レンダリング方法がダサい方向へ切り替えられ、画像やデザインが効かない場合があるそうな。

2つ目、viewportの話。viewportというのは、表示領域のこと。
content="width=device-width" というのは、デバイスの幅を示していて、もしここに"width=480"と指定したとすると、480pxのスマホのような見た目を指定することになるらしい。
そういうレアな使い方をすることがない場合は、"width=device-width"で問題ないだろう。
また、"initial-scale=1"は、100%表示のことを示しているので、これを0.5とかにすると、よくわからないことになるらしい。
一度試してみたいと思うが、いまの段階ではこれくらいの理解で良いとしておく。


参考:1つ目
IEに互換表示をさせないX-UA-Compatibleの指定 | loconoco

参考:2つ目
もう逃げない。HTMLのviewportをちゃんと理解する - Qiita