こんにちは、Webサイト制作勉強中のOuiです。
レスポンシブ時に必ず確認したいサイズとは？
メディアクエリを使ってレスポンシブサイトを作るときに使う、「検証ツール」。
GoogleChoromeを使っていたら、大活躍です。
右クリックをしてコンテキストメニューから選択するか、
F12キー（ノートPCの場合はFnキーを押しながらの場合もある）で
検証ツールが開きます。
検証ツールの使い方、詳しくは
https://ferret-plus.com/1880
そして、私はしばらく、
自分の持っているiPhone6/7/8あたりのサイズ表示で確認して
それで納得して勉強中のWebサイトをアップしていました。
ここがレイアウトミスの「落とし穴」でした。
レスポンシブは320pxで確認しよう
ここ、重要です。
自分の環境だけで良しとするなかれ。
2018年現在もしっかり使われているサイズ、iPhone5/SEサイズの
width:320px
でも必ず検証しておくこと！
私の場合、320px幅だとレイアウト崩れしていることがとても多かった！
うっかり確認不足、恥ずかしい…
今日も、ハッと思って以前作ったサイトを確認したら崩れていたね…
いい加減学習せねば。
実機で確認する時も、自分の持ってるサイズの
スマートフォンでしか確認していませんでした。
Wi-Fiつながっている場所なら、
過去使っていたサイズのスマートフォンでも確認出来ますしね。
まとめ
すべてのスマートフォンユーザーのために、
今後はよりよいレスポンシブサイトをきっちり作ると、誓いたい。
以上、備忘録でした。
