ほとんどのデスクトップ ブラウザーで正常に動作する ASP.NET MVC Web サイトを取得しました。モバイル用のバージョンを作成する必要があります。これには CSS メディア クエリを使用する必要がありますが、開発中にページをテストする方法がわかりません。 ? モバイル ブラウザのように使用できるデスクトップ アプリケーションはありますか?
4 に答える
私はあなたを助けることができる3つのツールを提案します:
- Adobe Shadow http://labs.adobe.com/technologies/shadow : デスクトップ ブラウザーで表示している Web サイトを、Adobe Shadow アプリを介してモバイルに同期し、モバイルで Chrome の開発ツールを使用できます。この方法でサイトにアクセスします。
- Android 上の Chrome を使用したリモート デバッグhttps://developers.google.com/chrome/mobile/docs/debugging : Adobe Shadow のように、Chrome 開発ツールを使用してサイトをデバッグおよびテストできます。ただし、ICS で動作する Android スマートフォンが必要です。
- 最後に、Xcode をお持ちの場合は、iPhone シミュレーターを使用してサイトを表示できます。これは非常に正確で、前の 2 つの場合のようにリアルタイムでデバッグすることはできませんが、更新のたびにその場でサイトをテストできます。
あなたは試すことができます
if (Request.Browser.IsMobileDevice == true)
{
....
}
ウェブサイトをテストするには、Chrome を使用できます。Chrome には優れた機能が含まれています。ユーザー エージェントを変更してから、Ipad、Iphone、または任意のスマートフォンの解像度をエミュレートできます。
レスポンシブデザインなどをテストするのにとても便利です:)
さらに、「シミュレーション」にすぎないことに注意してください。実際のテストに取って代わることはありませんが、構想と生産前のプロセスには適しています。
Chrome のユーザー エージェント変更機能に関するリンクは次のとおりです。
特定のビューポート幅で起動するメディア クエリをテストしたいだけの場合は、ブラウザの幅を小さくしてください。さまざまなメディア クエリが起動されると、UI が変化するのを見ることができます。
ブラウザ プラグインを使用して、ビューポートの解像度を定義および設定することもできます。Chromeの「ウィンドウのサイズ変更」を使用しています。
ダウンロードしてデスクトップで実行できる Android エミュレーターがありますが、これは主にデバイス固有の機能をテストするために使用されます。
結局のところ、モバイル Web サイトをテストする最善の方法は、ターゲットにしているデバイスを使用することです。