#どうも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制作のちょいテク詰め合わせ