86

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

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

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

4

10 に答える 10

49

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

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

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

于 2013-03-19T17:47:05.670 に答える
29

EDIT 2020:これらのほとんどは基本的に解像度のものをテストするためのものであり、それらのいくつかは時代遅れであり、悲しいことに、モバイルブラウザーの開発はデスクトップ (特に Apple) で横向きになったため、これらを使用して実際の電話を実際に「エミュレート」することはできません。コメントで言及。

実際の電話をエミュレートするには、多くの場合、最良の選択はデスクトップ アプリをダウンロードすることです。これは、Windows では通常有料/フリーミアムで、Mac では Xcode を使用するだけです (ただし、Mac の人々がこの Q/A を探しているとは思えません)。

最近見つけたフリーミアム オンラインの使いやすいAppetize.ioは、ネットワークに応じて実際に画面をレンダリングするようですが、正直なところ、実際の iOS と同じ機能や欠落している機能があるかどうかについては、あまり掘り下げていませんでした。

アドバイス:
リリース前に、常に実際のデバイスでテストしてください :)

2 台の iPhone で iOS 自体が異なる動作をするケースに遭遇しました...

使用しているオンライン シミュレーター/エミュレーター

1) リコンブ

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

2) レスポンシミュレーター

recombu と同じように動作するようですが、テキスト入力で URL を直接開いたり、ズームイン/ズームアウトしたりできます。
リンク: http://www.responsimulator.com/

3) トランスモグ

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

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

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

ブラウザ デバイス モード

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

このオプションを選択すると、GUI が変わり、シミュレートするデバイスを選択するオプションが表示されます (Chrome では上部にあります - オプション「デバイス」を選択します)。デバイスを選択した後、シミュレーターの精度を確保するためにページを更新することをお勧めします。
Chrome デバイス モード - デバイス選択オプション

于 2014-10-11T11:48:50.873 に答える
25

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

エミュレーターを取得するには: [Ctrl+Shift+M] を押して、エミュレートするデバイスを選択します。ページの読み込み時に実行されるスクリプトに依存するものがある場合は特に、ページを更新する必要があるかもしれません。

Google Chrome エミュレーション モード

Internet Explorerには、デバイス エミュレーション モードもあります。F12、次に CTRL+8。Chrome モバイル デバイスのエミュレーションほど簡単ではありませんが、位置情報をシミュレートできます。

Internet Explorer エミュレーション モード

于 2014-02-26T03:53:37.760 に答える
11

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

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

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

于 2016-08-02T08:42:12.430 に答える
3

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

于 2013-03-19T17:46:55.747 に答える
2

実際のデバイスでテストすることに代わる良い方法はありません。

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

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

于 2013-03-19T17:50:54.307 に答える
1

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

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

于 2013-03-19T17:48:40.873 に答える
0

私はMobilizerを使用しています。無料アプリ

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

于 2013-07-01T20:10:21.383 に答える