ホームページ >ウェブフロントエンド >htmlチュートリアル >モバイル Web 開発モバイル端末の実機テスト_html/css_WEB-ITnose
モバイル Web 開発モバイル端末の実機テスト_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:17:291198ブラウズ
× ディレクトリ [1] 機能 [2] インストール [3] 設定 [4] モバイル
上記の通り
Chrome のデベロッパー ツールはシミュレーションではうまく機能しますが、結局のところ、シミュレーションと現実は違う。そのため、実機テストを行う必要があります。実機テストを効率的に行うにはどうすればよいでしょうか。個人的にはBrowserSyncの方が使いやすいと感じています。この記事では、モバイル実機テストに BrowserSync を使用する方法を詳しく紹介します
特徴
BrowserSync を使用すると、更新操作を行わずに、PC とモバイル デバイス上のページがファイルの変更に同時にリアルタイムで応答できます。さらに、クリックなどの動作が別のデバイスで行われた場合、その動作は他のブラウザにも同期されます
インストール
BrowserSync は Node.js をベースにしており、Node モジュールであるため、インストールする必要があります初めてのnodejs
【nodejsのインストール】
nodejsの公式Webサイトでnodeのmsiファイルが提供されていますが、Windows 7システムで何度も試しましたが、正常にインストールできず、システムがインストールされていないことを示すプロンプトが表示されます。変更されました....最後に、別の方法でnodejsのインストールに成功しました
【1】node.exeをダウンロード
【2】最新版のnpm zip形式圧縮パッケージをダウンロード
【3】ハードディスク上の特定の場所に、 Dドライブにファイルnodejsを作成し、上でダウンロードした2つをここに置き、npmで解凍する必要があります
【4】環境変数を2つ設定します。1つはPATH上にnode.exeのディレクトリD:nodejsを追加し、もう1つは環境変数です。環境変数 NODE_PATH を追加することです。値は D:nodejsnode_modules
【5】express をインストールします: cmd コマンド ラインを開きます (nodejs ディレクトリで、最初に Shift ボタンを押したままにし、次に右クリックすると、「ここ」が表示されます コマンド ウィンドウを開き、「オプションをクリックして」)、コマンド ラインを使用して Node ディレクトリに移動し、コマンド npm install Express を入力します
【6】インストールが完了したら、次のように入力しますコマンドラインでnode -vを実行し、nodejsのバージョンが出力されればインストール成功です
設定
nodejsのインストール後、インストールや監視など、BrowserSyncの簡単な設定を行う必要があります
【1】 BrowserSyncのインストール
ターミナルウィンドウを開き、次のコマンドを実行します:
npm install -g browser-sync
【2】BrowserSync Listening
ファイルのパスは、コマンドが実行されるプロジェクト(ディレクトリ)からの相対パスです。複数の種類のファイルを監視する必要がある場合は、カンマで区切る必要があります
browser-sync start --server --files "css/*.css, *.html"
【3】nodejsディレクトリに新しいindex.htmlファイルを作成し、以下のコードを設定します
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style>div{ height: 100px; width: 100px; background-color: lightblue;} </style></head><body><div>测试文字</div> </body></html> デスクトップページが開きます次のように:
モバイル設定
モバイル デバイスを使用する場合は、まずモバイル デバイスとデスクトップ デバイスが同じ LAN 内にあることを確認します (通常、両方がルーターに接続されています)。さらに、モバイル端末はローカルホストにアクセスできないため、コンピュータのイントラネット IP を見つける必要があります。コマンドラインに ipconfig と入力して、IP アドレスが 192.168.1.100 であることを確認します。したがって、携帯端末がアクセスするアドレスは http://192.168.1.100:3000 となります
携帯端末は次のように表示されます:
htmlファイルを以下のコードに変更すると
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style>html{ background-color: pink;}</style></head><body><div>测试文字</div> </body></html> そこでは、モバイル端末の Web ページを更新する必要はありません。次の表示に自動的に変わります:
このようにして、モバイルデバイスのテストを簡単に開始できます。