スマホやタブレットなど、任意のデバイスでの表示を確認する方法

スマホやタブレット向けにサイトをカスタマイズしても身近にそれぞれの端末がなければどのように表示されるのか分からず不安になることがあると思います。

仮に端末を持っていてもスマホ・タブレットには多くの種類があって、サイトの表示確認は困難です。

これを解決するには主に以下2つの方法があります。

1・スクリーンサイズをエミュレートしてくれるサイトを利用する

メディア・クエリのmax-with、min-withを用いてサイトをカスタマイズしている場合に反映されるもので、パソコンでサイトを開き、手動でブラウザのサイズを変えることを自動化してくれるサイトのことです。

resizr.coにアクセスしましょう。



Load URL : 確認したサイトのURLを入力
Devices : 確認したいデバイスを選択
Landscape/Portrait : 横向き/縦向き
Show scrollbar : スクロールバーを表示

2・Chromeのデベロッパーツールを利用する

上記の場合、アフィリエイトでnendを利用している方はバナーが表示されなかったと思います。

そんな時はChromeのデベロッパーツールを利用しましょう。任意のデバイスでの表示を完全にエミュレートできます。

1.Google Chromeで確認したいサイトを開き、右クリックをして「要素を検証」を選択。




2.左上部のDeviceの欄で確認したいデバイスを選択



以上で任意のデバイスの表示をエミュレートしてくれますが、上手くいかない方はページをリロードしてみてください。

Related Posts