Kostenloser Screen Resolution Simulator
Dieser kostenlose Screen Resolution Simulator zeigt Ihre eigene Bildschirmgröße und Browserfenstergröße und zeigt eine Vorschau jeder Webseite in der Breite eines Telefons, Tablets, Laptops oder Desktops. Wählen Sie ein Gerät oder geben Sie eine Breite ein, fügen Sie eine Seitenadresse ein und die Seite wird in einem Frame in dieser Größe geladen. Eine Tabelle mit häufigen Geräteabmessungen funktioniert auch ohne JavaScript.
Screen Resolution Simulator
Domain and Server
Über dieses Tool
Eine Seite, die auf Ihrem Laptop richtig aussieht, kann auf einem kleinen Telefon zusammenbrechen, und die einzige ehrliche Möglichkeit, das zu wissen, ist, sie in dieser Breite anzusehen. Dieses Tool lädt Ihre Seite in einem Frame in der von Ihnen gewählten Breite, sodass Sie Menüs, Bilder und Schaltflächen bei 360, 390, 768 oder 1366 Pixeln überprüfen können, ohne jedes Gerät zu besitzen. Es meldet auch Ihre eigene Bildschirm- und Fenstergröße, die Support-Teams häufig abfragen.
Die Zahlen sind CSS-Pixel, die Einheiten, die ein Webseitenlayout verwendet, nicht die physischen Pixel eines Bildschirms. Ein Telefon mit einem sehr scharfen Display meldet immer noch einen Viewport von etwa 360 bis 430 CSS-Pixeln Breite, in den Ihr Design passen muss. Die Tabelle listet typische Größen für beliebte Geräteklassen auf. Echte Geräte unterscheiden sich, und Browser-Symbolleisten nehmen etwas Höhe in Anspruch, daher behandeln Sie die Größen als grobe Richtlinie und nicht als exakte Messung.
Viele Websites verbieten, in einer anderen Seite angezeigt zu werden, um Besucher vor Click-Tricks zu schützen. Wenn eine Website diese Anweisung sendet, erkennt dieses Tool dies, zeigt keine Vorschau an und teilt dies mit, anstatt ein leeres Feld anzuzeigen. Ihre eigene Website kann in einem Frame angezeigt werden, wenn sie X-Frame-Options oder eine frame-ancestors-Regel nicht sendet. Eine Vorschau in einem Frame führt auch keine Media Queries auf dem Gerät selbst aus, daher bestätigen Sie wichtige Layouts auf einem echten Telefon, bevor Sie starten.
Häufig gestellte Fragen
Warum sagt die Vorschau, dass die Seite nicht in einem Frame angezeigt werden kann?
Viele Websites, einschließlich Banken, sozialer Netzwerke und großer Shops, senden einen Header, der das Anzeigen der Seite in einer anderen Seite verbietet, als Schutz vor Click-Hijacking. Der Browser würde ein leeres Feld anzeigen, daher teilt das Tool Ihnen stattdessen mit. Testen Sie diese Websites in den Entwicklertools Ihres Browsers im Gerätemodus.
Was ist der Unterschied zwischen Bildschirm- und Viewport-Größe?
Die Bildschirmgröße ist die vollständige Anzeige Ihres Geräts. Der Viewport ist der Teil des Browserfensters, der die Webseite anzeigt, der kleiner ist, da Symbolleisten und Scrollbalken vorhanden sind. Layouts reagieren auf den Viewport, daher ist dies die Zahl, die für responsives Design wichtig ist.
Sind die Geräteabmessungen exakt?
Sie sind typische CSS-Pixelgrößen für häufige Geräteklassen. Telefone und Tablets unterscheiden sich je nach Modell und Software, und Browser-Leisten ändern die Höhe. Sie sind genau genug, um Layout-Probleme zu erkennen, aber testen Sie wichtige Seiten immer auf einem echten Gerät, bevor Sie starten.
Testet dies meine Website auf einem echten Telefon?
Nein. Es verengt den Frame auf eine Telefonbreite, sodass die Seite ihre mobilen Layout-Regeln anwendet, aber es läuft immer noch in Ihrem aktuellen Browser. Touch-Verhalten, Schriftarten, Browser-Leisten und Leistung können auf einem echten Telefon unterschiedlich sein. Verwenden Sie es als schnelle erste Überprüfung, nicht als endgültigen Test.
Wird die eingegebene Adresse gespeichert?
Nein. Unser Server fordert die Seite einmal an, um ihre Framing-Header zu lesen, und vergisst sie dann. Die Vorschau selbst wird direkt von der Website in Ihren Browser geladen. Wir speichern die Adresse, den Seiteninhalt oder Ihre Bildschirmgröße nicht.