Water.cssを使っていてレスポンシブデザインにならないときにチェックすること
Water.css、とても便利なので、あまりデザインの凝らないシンプルなWebアプリを作ろうというときには結構な頻度で手が伸びます。
cssのことを気にせず、HTMLでページの構造を作っているだけで、それなりに整ったデザインになるのはとても助かります。
さて、今回、water.cssを適用しているのに画面上の表示がレスポンシブデザインにならないときがありました。
はて、なんでかな？と思い、調べてみると、下記の viewport に関する記述をHTMLファイルの <head></head> に挿入し忘れていただけでした。
<meta name="viewport" content="width=device-width, initial-scale=1.0">
なんてことない凡ミスなのですが、なんとなく将来同じミスをまたやりそうな気がしたので、備忘録として残すことにしました。
以上です。
