【safari】開発ツールで表示確認・WEBデザインの便利機能

PCとスマホの表示確認

パソコンでブログを書いていると、これはスマホでどう表示されるのか?
ちょっと心配になることがあります。
実際に自分のスマホで表示してみるのもいいですが、結構面倒だったりします。
スマホ表示

safariに搭載されているデベロッパーツールが便利!

safariを起動してメニューから『開発』→『レスポンシブ ・デザイン・モードにする』をクリックする。
これだけでスマホやiPadなどで、実際の表示確認ができます。
CSSがスマホでは効かない場合があったりするので、そういった確認をする時に便利です。
サイトを訪れるデバイスのほとんどが、スマホからの流入という事もあるので表示のされ方は重要事項ですね。
パソコンでは見やすくても、スマホだと見づらい。
せっかく書いたのに、これじゃわかりにくい・・・
そんな「残念」を見逃さないためにも、表示確認は重要事項といえますね。
拡張機能を入れすぎのは抵抗がありますが、も
ともと備わっているものなので何の準備も不要です。
キー操作で起動できるので時短にも役立ちます。

この記事を書いた人Wrote this article

Wagマニア