モバイル Web 開発モバイル端末の実機テスト_html/css

モバイル Web 開発モバイル端末の実機テスト_html/css_WEB-ITnose

WBOY

リリース： 2016-06-24 11:17:29

オリジナル

1212 人が閲覧しました

× ディレクトリ [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 ページを更新する必要はありません。次の表示に自動的に変わります:

このようにして、モバイルデバイスのテストを簡単に開始できます。