クロムビューポートを手動でサイズ変更すると、ブラウザで「検査」を使用したサイズ変更と異なる結果が発生する

Question

Wordpress用の反応的なカスタムテーマを作成しようとしています。私はWAMPを使ってローカルにホスティングしていますし、モバイルフレンドリーであることを確認するためにさまざまなツールを使用しています。問題は、私は一貫した結果を得ていない、テーマが実際のサイトにアップロードされるまで（実際に携帯電話でテストすることはできません。 「点検」機能をChromeを使用してから

結果：ビューポートの幅が320ピクセル未満であってもこれまでのところ

とても良いです、。右？手動でChromeブラウザのウィンドウをリサイズから

結果：

は冗談、363pxでデザインブレイク。

これはモバイルデバイスに表示されますか？アドバイスをいただければ幸いです。

Answer 1

クロムの手動リサイズがモバイルデバイスでより正確になることがわかりますが、モバイルデバイスでテストすることをおすすめします。

ローカルサーバー（localhostまたは127.0.0.1）を実行している限り、サーバーに配置することなく、サイトをテストすることができます。方法は次のとおりです。

1. モバイルデバイスとローカルサーバーを実行しているコンピューターが同じWi-Fiネットワークに接続されていることを確認してください。

2. ローカルネットワークのIPアドレスを確認してください。便利なリンクは次のとおりです。http://lifehacker.com/5833108/how-to-find-your-local-and-external-ip-address

3. ローカルデバイスのブラウザにローカルネットワークのIPアドレスを入力し、続いてローカルサーバーを実行しているポートを入力します。

   例：ローカルネットワークのIPアドレスが192.168.1.11あり、そしてあなたがlocalhost:5000でサイトにアクセスしている場合、あなたは192.168.1.11:5000であなたのモバイルデバイス上のサイトにアクセスすることができます。