Ich muss sehen, wie meine Webseiten auf einem iPhone und iPad auf meinem Windows-Desktop aussehen. Ist das möglich?

Eine schnelle Suche ergab einige iPhone-Testseiten, die so aussahen, wie ich es wollte. Im Vergleich zu meinem eigenen iPhone sind sie jedoch sehr ungenau! Ich brauche wirklich etwas, das so genau wie möglich ist.

Hat XCode einen Simulator, der 100% genau ist? Ich verstehe, ich brauche einen Mac, um XCode auszuführen ...

Der mit Xcode gelieferte iPhone / iPad-Simulator enthält Safari. Wenn Sie Safari im Simulator ausführen, können Sie Ihre Website anzeigen und sie sollte genauso aussehen wie auf einem realen Gerät. Dies kann für allgemeine Layouttests funktionieren. Da es sich jedoch um einen Simulator handelt, ist es möglich, dass nicht jede einzelne Funktionalität genau der eines echten iOS-Geräts entspricht.

Wenn Sie eine Website schreiben und überprüfen müssen, ob sie auf einem bestimmten Gerät ordnungsgemäß aussieht, müssen Sie Ihre Website auf diesem tatsächlichen Gerät testen. Das Testen mit echter Hardware ist Teil des Geschäftspreises.

Und ja, Sie benötigen einen Mac, um Xcode auszuführen.

Sowohl Chrome als auch Firefox verfügen jetzt über integrierte Emulatoren. Sie sind nicht perfekt, aber gut genug, um Sie vor dem Testen auf einem tatsächlichen Gerät fast vollständig zu unterstützen. Das Beste ist, wenn Ihnen die Entwicklertools des Browsers ( Chrome) gefallen , Firefox ) , können Sie sie beim Emulieren verwenden.

So rufen Sie den Emulator auf: [Strg + Umschalt + M] und wählen Sie das Gerät aus, das Sie emulieren möchten. Möglicherweise müssen Sie die Seite aktualisieren, insbesondere wenn Sie etwas haben, das vom Skript abhängt, das beim Laden der Seite ausgeführt wird.

Internet Explorer verfügt auch über einen Geräteemulationsmodus. F12, dann STRG + 8. Es ist nicht ganz so einfach wie die Chrome Mobile Device-Emulation, ermöglicht jedoch die Simulation der Geolokalisierung:

EDIT 2020: Die meisten davon sind im Grunde nur zum Testen von Auflösungssachen gedacht, einige sogar veraltet, leider ging die Entwicklung mobiler Browser mit dem Desktop seitwärts (insbesondere in Apple), daher kann man ein echtes Telefon mit diesen nicht wirklich "emulieren" mit Kommentar erwähnt.

Um echte Telefone zu emulieren, ist es oft die beste Wahl, eine Desktop-App herunterzuladen, die für Windows normalerweise kostenpflichtig / freemium ist. Verwenden Sie auf dem Mac einfach den Xcode (aber ich bezweifle, dass Mac-Leute nach dieser Frage / Antwort suchen).

Freemium online einfach zu bedienen, das ich kürzlich gefunden habe, ist Appetize.io Es scheint den Bildschirm wirklich nach Netzwerk zu rendern, aber ehrlich gesagt habe ich nicht wirklich untersucht, ob es auch identische Funktionen und indentisch fehlende Funktionen wie echtes iOS hat.

Online-Simulatoren / Emulatoren ich benutze

1) rekombinieren

Feiner Simulator, der - anders als Größenänderung des Browserfensters auf die Größe eines Mobiltelefons wie ein Smartphone funktioniert. Seien Sie nicht verwirrt, dass Sie die Adressleiste in Safari nicht bearbeiten können. Öffnen Sie einfach die Deveolper-Tools (normalerweise F12) und schreiben Sie die Quell-URL von iframe in Ihre.
Verknüpfung: http://recombu.com/mobile/interactive/ios7-demo/

2) Responsimulator

Scheint wie eine Rekombination zu funktionieren, aber Sie können die URL direkt per Texteingabe öffnen und vergrößern / verkleinern.
Link: http://www.responsimulator.com/

3) Transmog

Dieser scheint die Webseite zu verarbeiten, emuliert aber das alte iPhone - manchmal immer noch praktisch.
Verknüpfung: http://transmog.net/iphone-simulator/mobile-web-browser-emulator.php

X) google es / Internet suche danach

Verwenden Sie immer Google (oder andere Internet-Sucher), um nach anderen Simulatoren / Emulatoren und neuen Versionen zu suchen.
Link mit Beispiel Google-Suche für diese:
https://www.google.cz/search?q=online+iphone+emulator

Browser-Gerätemodus

Wenn Sie die Entwicklertools Ihres Browsers öffnen (in Chrome F12), besteht wahrscheinlich die Möglichkeit, den Gerätemodus umzuschalten (in Chrome ist dies das kleine Smartphone-Symbol oben links).

Nach Auswahl dieser Option ändert sich die Benutzeroberfläche und bietet die Möglichkeit, ein zu simulierendes Gerät auszuwählen (in Chrome ganz oben - wählen Sie die Option "Gerät"). Nach Auswahl des Geräts wird häufig empfohlen, die Seite zu aktualisieren, um die Genauigkeit des Simulators sicherzustellen.

Im Moment denke ich, dass der beste Emulator https://app.crossbrowsertesting.com ist

Es hat reale Größen und eine virtuelle Tastatur (das ist das Wichtigste), Zoomereignisse ...

Auch https://appetize.io/demo hat die gleichen Dinge, aber es gibt ein Zeitlimit.

Sie können eine Safari im Xcode-Simulator ausführen, der iPads und iPhones genau emulieren sollte. Eine andere Sache auf dem Markt, für die ich gute Kritiken gehört habe, ist Ripple for Chrome .

Es gibt keinen guten Ersatz für das Testen auf einem tatsächlichen Gerät.

Reale Geräte haben höhere Anzeigedichten, was bedeutet, dass die Pixel kleiner sind. Wenn Sie nicht auf einem realen Gerät testen, stellen Sie möglicherweise nicht fest, dass Ihr Design Text enthält, der zu klein zum Lesen ist, oder Schaltflächen, die zu klein zum Tippen sind.

Sie verwenden echte Geräte mit Ihren Fingern, keine Maus. Dies bedeutet, dass die Genauigkeit Ihrer Klopfen viel geringer ist und das, was Sie tippen, von Ihrem Finger verdeckt wird. Wenn Sie nicht auf einem realen Gerät testen, stellen Sie möglicherweise nicht fest, dass Sie Usability-Probleme in Ihr Design eingeführt haben.

XCode wird mit einem Simulator geliefert für iPad und iPhone geliefert.

Sie können Safari unter OS X auch zum Debuggen von Websites auf Ihrem iOS-Gerät verwenden.

Sie können den Ripple-Emulator in Chrome verwenden.

Ich habe benutzt Mobilizer verwendet , was großartig istkostenlose App

Derzeit gibt es eine Standardsimulation für Iphone4, Iphone5, Samsung Galaxt S3, Nokia Lumia, Palm Pre, Blackberry Storm und HTC Evo. Einfach, unkompliziert und effektiv.

Ich verwende das Chrome-Plug-In für den mobilen Browser-Emulator, das über iPhone-Gerätetypen verfügt. Tatsächlich werden der Benutzeragent und die Größe des Geräts verwendet, auf dem reaktionsfähige Seiten gerendert werden