どうも7noteです。検証ツールは便利ですが知らないと罠にハマってしまいます。

検証ツールは便利で多機能なのでついつい便りガチですが、頼りすぎずに節度ある距離感で付き合っていきたいものです。

まだまだWEB開発者初心者の方向けに検証ツールで注意すべき点をまとめました。

注意点①：フォントはデバイスに依存する

WEBフォントを入れていれば大丈夫ですが、デフォルト規定のフォントの場合PCとスマホではフォントが違うことが多いです。

フォントによって、幅や文字の大きさが違うので思っていた改行にならなかったり。
改行具合を綺麗に見せたいのであれば、あらかじめ余裕をもったところで改行させるか、実際にスマホでチェックするようにしましょう！

注意点②：検証ツールでピッタリだと、実機では1文字ズレることがある。

これは体験談なのですが、検証ツール上で375pxのデバイスで見ていても、実際に375pxのデバイスで見ると1文字分ズレていたりします。

(例：検証ツールでは↓)

(例：実際のデバイスでみると↓)

こうなることがあります。

原因はおそらくWEBフォントで、必要なフォントサイズを読み込めていなければPCとスマホではフォントの太さの指定が異なり、がじゃっっっかんのズレが生じて1文字ずれてしまうことが。。
やっぱりデベロッパーツールはあくまで検証用なので、必ず実際のデバイスでチェックが必要ですね。

注意点③：iosのinputやbuttonはiosデフォルトのCSSが効いているので見た目が崩れる

iosのデバイスを持っていなければ絶対に気づけないのですが、iosにはデフォルトでinputなどにcssが当てられています。
無効化するために以下の設定をreset.cssなどで必ずしておきましょう。

input,button,select,textarea{-webkit-appearance:none;}

注意点④：他にもiosだとなぜか効かないCSSだったり、スクリプトが存在する

これは稀に起こるのですが、ネットのソースを持ってきたりしたら実はiosだけ効きませんみたいなことがあります。
そういう場合はgoogle先生に「○○○○ ios 効かない」とかで検索して助けを求めましょう。
それでも原因が不明の場合は、書き方が間違っているか、ほんとに原因が不明なので、違う方法を探しましょう。

おまけで注意

スマホはキャッシュクリアがやりにくいです。そのためCSSを変えたつもりでリロードしてもキャッシュが残ったままで最新のCSSが効かない場合があります。
スマホのキャッシュクリアを忘れずに。

参考になるかも

実機のスマートフォンデバイスで検証する方法について書いたQiitaの記事がありましたのでご紹介。
https://qiita.com/aqril_1132/items/4789bc12a511136d8bfa

スマホでもview-source:を使う方法は私も初めて知ったので参考にしてみたいと思います。

おそまつ！

~ Qiitaで毎日投稿中!! ~
【初心者向け】WEB制作のちょいテク詰め合わせ