web-dev-qa-db-ja.com

iPhone / iPadブラウザーシミュレーター?

WindowsデスクトップのiPhoneとiPadでWebページがどのように見えるかを確認する必要があります。これは可能ですか?

簡単な検索で、iPhoneのテストサイトがいくつか見つかりました。しかし、私が自分のiPhoneと比較したとき、それらは非常に不正確です!可能な限り100%に近いものが本当に必要です。

XCodeには100%正確なシミュレータがありますか? XCodeを実行するにはMacが必要だと理解しています...

69
at.

Xcodeに付属のiPhone/iPadシミュレーターにはSafariが含まれています。シミュレーターでSafariを実行すると、Webサイトを表示でき、実際のデバイスと同じように表示されます。これは、一般的なレイアウトテストで機能する場合があります。しかし、それはシミュレータであるため、機能のすべてのビットが実際のiOSデバイスを使用する場合とまったく同じになるとは限りません。

Webサイトを作成していて、特定のデバイスで適切に表示されることを確認する必要がある場合は、その実際のデバイスでWebサイトをテストする必要があります。実際のハードウェアでのテストは、ビジネスを行うための価格の一部です。

はい、Xcodeを実行するにはMacが必要です。

42
rmaddy

ChromeFirefox の両方に組み込みのエミュレーターが追加されました。これらは完全ではありませんが、実際のデバイスでテストする前にほとんどすべてを取得できるほど十分に優れています。最良の部分は、ブラウザの開発者ツール( ChromeFirefox )が好きな場合、エミュレートしながら使用できることです。

エミュレーターを入手するには:[Ctrl + Shift + M]で、エミュレートするデバイスを選択します。ページの読み込み時に実行するスクリプトに依存する何かがある場合は特に、ページを更新する必要があります。

Google Chrome Emulation mode

Internet Explorer にはデバイスエミュレーションモードもあります。 F12、次にCTRL + 8。 Chromeモバイルデバイスエミュレーションほど単純ではありませんが、ジオロケーションをシミュレートできます。

Internet Explorer Emulation mode

32
jiminy

私が使用するオンラインシミュレーター/エミュレーター

1)リコンブ

-unlikeブラウザウィンドウのサイズを携帯電話のサイズに変更する-スマートフォンと同じように機能します。サファリでアドレスバーを編集できないことを混同しないでください-開発ツール(通常はF12)を開いて、iframeのソースURLを書き換えてください。
リンク: http://recombu.com/mobile/interactive/ios7-demo/

2)応答シミュレータ

Recombuのように動作するようですが、テキスト入力で直接urlを開くことができ、ズームイン/ズームアウトできます。
リンク: http://www.responsimulator.com/

3)トランスモグ

これはウェブページを処理するように見えますが、古いiPhoneをエミュレートします-まだ便利です。
リンク: http://transmog.net/iphone-simulator/mobile-web-browser-emulator.php

X)Google It /インターネット検索

常にグーグル(または他のインターネット検索者)を使用して、他のシミュレーター/エミュレーターと新しいバージョンを確認してください。
この例のGoogle検索の例へのリンク:
https://www.google.cz/search?q=online+iphone+emulator

ブラウザデバイスモード

ブラウザの開発者向けツール(Chrome F12)を開くと、おそらくデバイスモードを切り替えるオプションがあります(Chromeでは左上の小さなスマートフォンアイコンです)。
chrome device mode icon

このオプションを選択すると、GUIが変更され、シミュレートするデバイスを選択するオプションが提供されます(Chromeの上部-オプション[デバイス]を選択)。デバイスを選択した後、ページを更新すると、シミュレーターの精度。
chrome device mode - device select option

18
jave.web

今のところ、最高のエミュレータは https://app.crossbrowsertesting.com だと思います

実際のサイズと仮想キーボード(最も重要なもの)、ズームイベントがあります...

また、 https://appetize.io/demo にも同じものがありますが、時間制限があります。

5
rotring05

Xcodeシミュレーターでsafariを実行すると、iPadとiPhoneを正確にシミュレートできます。私が良いレビューを聞いた市場でのもう一つのことは、 クロムのリップル です。

3
j_mcnally

実際のデバイスでのテストに勝るものはありません。

実際のデバイスはディスプレイ密度が高く、ピクセルが小さくなっています。実際のデバイスでテストしないと、デザインに含まれるテキストが小さすぎて読めないか、ボタンが小さすぎてタップできないことに気付かない場合があります。

マウスではなく、指で実際のデバイスを使用します。これは、タップの精度がはるかに低く、タップしているものが指で隠れていることを意味します。実際のデバイスでテストしないと、設計にユーザビリティの問題が生じていることに気付かない場合があります。

2
Jim

XCode シミュレーターが付属しています iPadおよびiPhone用。

IOSデバイスで OS XのSafariでWebサイトをデバッグする を使用することもできます。

1
sosborn

Chromeでは Ripple emulator を使用できます。

0
Louis

Mobilizer を使用していますが、これはすごいです 無料アプリ

現在、Iphone4、Iphone5、Samsung Galaxt S3、Nokia Lumia、Palm Pre、Blackberry Storm、HTC Evoのデフォルトのシミュレーションがあります。シンプルで簡単かつ効果的。

0
pal4life