【Chrome】PCでスマホ・タブレットなど様々な端末ですぐテストできる

スポンサーリンク
プログラミング

いろいろな画面サイズのデバイスでテストしたいけど

手元にないからできないなぁ

このようなお悩みを解決いたします。

ブラウザで動作するコンテンツは、様々なデバイスの画面サイズに合わせたレスポンシブなデザインが必須になってきますよね。

さらには、タッチアクションに対する挙動も簡単に確認したいですよね。

私は大学院の研究活動でWebコンテンツを開発していますが、先日この問題に直面しました。

レスポンシブなデザインを作る過程で、実際のデバイスで確認したいけどデバイスがない…。

そんなとき、めちゃくちゃ簡単に様々なデバイスを仮想的に試せる便利な機能が、Chromeにあることを知りました。(教えてくれた教授に感謝!)

しかもタッチアクションもPCで確認できるので開発がとても捗ります

当記事では、その方法をご紹介します。

とても簡単なのでぜひ参考にしてください。

当記事を読むと、

  • PCでタブレットやスマホなど様々な画面サイズを試せる
  • タッチアクションに対する挙動も確認できる
  • 開発がとても捗る
スポンサーリンク

様々なデバイスの試し方(図解)

早速ですが、その方法を解説いたします。

とても簡単です。

対象のWebコンテンツをChromeで開く

私はローカルで適当なページを開いております。

みなさんは試したいWebページを開いてください。

デベロッパーツールを開く

続いてデベロッパーツールを開きます。

F12ctrl + Shift + I を押してください。

右にウィンドウが出てきましたでしょうか。

もしF12 と ctrl + Shift + I を押しても出てこない方は、

右上の”縦に点3つ”のアイコンから、その他のツール ⇒ デベロッパーツール を選択してください。

デバイスの種類や向きを選択する

右のウィンドウの左上にある、スマホとタブレットのアイコン(赤丸で囲んだところ)をクリックしましょう。

すると、左側の画面がこのように変わると思います。(若干違うかもしれません)

ここまできたらあとはいろいろ好きなように試すだけです!

① 端末の変更

①の部分をクリックすると、

この中から好きな端末を選択すれば、画面サイズや解像度など、その端末で動作させたときと同じような見え方をします。

② 縦向きか横向きか

②の部分をクリックすると縦向きと横向きを切り替えることができます。

スポンサーリンク

まとめ

いかがでしたでしょうか。

とても簡単にスマートフォンやタブレットが試せることが分かったと思います。

これでみなさんのレスポンシブな開発が捗ることをお祈りしております。

以上です。

コメント

タイトルとURLをコピーしました