web-dev-qa-db-ja.com

デスクトップブラウザでモバイルウェブサイトをテストする

JQuery Mobileを使用して、iPhone、AndroidなどのモバイルWebサイトを開発しています。デスクトップブラウザでこれをテストできるようにしたいと思っていましたが、最善のアプローチは何かと考えていました。プラグインを使用してUser-Agentヘッダーを適切な値に変更し、ブラウザーをデバイスの幅に手動でサイズ変更できると思いますが、より簡単で信頼性の高い方法はありますか?

更新

申し訳ありませんが、利用可能なハードウェアはWindowsラップトップのみです。

13
Dónal

Macをお持ちで、xCodeがインストールされている場合は、シミュレータを使用できます。 Mobile Safariを開き、すべてのAppleデバイスでWebページをポイントします

Androidエミュレーターを使用することもできます(ただし、ブラウザーからWebにアクセスできることはテストしていません)。

または、プラグインを使用することもできます(提案したとおり)。

私は個人的にChromeこのプラグインで使用します:

かなり良い結果が得られました。

以前にDeviceAnywhereを使用したことがあります

webポータル/サイトを介してデバイスにアクセスして制御しますが、これには$$$の費用がかかります

最も信頼性の高い実際のデバイステスト

関連:

7
Phill Pafford

Chrome F12を押して開発者ツールバーを開きます。次に[デバイスツールバーの切り替え](タブレットアイコン、選択した要素の横にある左上)をクリックします。次に、上部にあるデバイスを選択してテストできます。

3
Jay Walks

http://www.browserstack.com/responsive もあります。これを使用して、特定のデバイスでサイトがどのように表示されるかのスクリーンショットを取得できます。

ただし、ここにリンクした無料バージョンで取得できるスクリーンショットの数には制限があります。

1
DevJoe

Chromeプラグイン レスポンシブウェブデザインテスター -すべてのプラットフォームでさまざまなデバイスサイズのモバイルブラウザをエミュレートできるようになります。

1
MantasG

Chromeアドオンと呼ばれるリップルベータ)を使用すると、視覚的に素晴らしい結果が得られました。悪い点は、タブレットなどのカスタムデバイスを追加する機能がないことです。 8 "または9"以上...しかし動作します。実際のデバイスに表示されるエラーを表示できるかどうかはわかりませんが、問題ないようです。

1
Ludus H

リモートでデバイスをテストするためのPerfectoMobileもあります...それは痛々しいほど遅くなる可能性がありますが。可能であれば、少なくともいくつかの「ベース」テストデバイスを入手することを強くお勧めします。

1
Rosie Sherry

Manymo Androidをシミュレートすると、非常にうまく機能するはずです。デスクトップブラウザには表示されませんが、携帯電話に表示される内容が正確に表示されます。Manymoは次のWebサイトです。たくさんのAndroid写真の携帯電話。1つをクリックしてURLを入力するだけです。Androidバージョンと画面サイズなどのオプションがあります。

0
frayser