Storm · Technische Demonstration
Ruffleshop 750 × 1100 px – Eigennormierung für hochgehaltene Smartphones.
Diese Storm-seitig gestaltete HTML-Seite zeigt, warum das Ruffleshop-Format 750 × 1100 Pixel für hochgehaltene iPhones und Smartphones eine bewusst bessere Wahl ist als ein reines A4-Verhältnis. Die zusätzliche Höhe schafft Raum für 16:9-Fotos im Fotostandard und bringt den goldenen Schnitt näher an die reale Nutzungssituation: ein Smartphone, das in der Hand nach oben gehalten wird.
Klassische A4-orientierte Seitengeometrien sind für Druck und statische Dokumente optimiert, nicht für hochgehaltene Smartphones. Das Ruffleshop- Format mit 750 × 1100 Pixel definiert eine eigene Geometrie, die sich an der realen Viewport-Breite von etwa 360–390 Pixel orientiert und vertikal bewusst mehr Raum gibt. 16:9-Fotos im Standardformat (z. B. 800 × 450 Pixel) können so mit mehr Höhe eingebettet werden, was den Bildbereich im Verhältnis zum Text näher an einen goldenen Schnitt bringt und die Produktwirkung auf iPhones deutlich erhöht.
Während Storm die technische Normseite mit 750 × 1060 Pixel definiert, setzt der Ruffleshop mit 750 × 1100 Pixel eine gestalterische Signatur: mehr Höhe für Bild, mehr Ruhe für Text, mehr Präsenz im Autozoom. Diese Eigennormierung ist kein Bruch, sondern eine bewusste Markenentscheidung für die Smartphone-Realität.
In bestimmten Versionen von Chrome auf iOS trat 2023 ein Viewport-/Zoom-Bug auf, der beim Scrollen oder beim Wechsel zwischen Hoch- und Querformat unerwartete Skalierungen verursachte. Die folgende iOS-JavaScript-Detection by Andreas Lützenberger erkennt das Umfeld und erlaubt eine gezielte Korrektur, damit das Ruffleshop-Format auch in diesen Situationen stabil bleibt.
<body id="page">
<script>
document.addEventListener("DOMContentLoaded", function() {
const ua = navigator.userAgent;
const isIOS = (
ua.includes("iPhone") ||
ua.includes("iPad") ||
ua.includes("iPod")
);
const isIOSChrome = (ua.includes("CriOS") && isIOS);
if (isIOSChrome) {
const page = document.getElementById("page");
if (page) {
page.style.transform = "scale(0.9)";
page.style.transformOrigin = "50% 0";
}
}
});
</script>
Durch die Kombination aus stabiler <meta name="viewport">-
Definition, der Eigennormierung 750 × 1100 Pixel und der
bewussten Einbettung von 16:9-Fotos entsteht eine Geometrie, die sich im
Autozoom nicht auflöst, sondern ruhig bleibt. Auf hochgehaltenen iPhones
wirkt das Bild größer, der Text klarer, der Gesamtrahmen näher an einem
goldenen Schnitt als bei einer reinen A4-Übertragung ins Web. Ruffleshop
passt damit nicht nur gestalterisch, sondern auch technisch – im Desktop-
Frame und im Smartphone-Viewport.