Skalierungsfehler Smartphone-Version

HouseCat schrieb am 20.01.2022 um 20:14 Uhr

Hallo liebe Community,

habe für eine sehr alte Webseite (von 2013 Magix Webdesigner 6 oder so) eine Smartphone-Version erstellt (mit XARA Designer Pro X), die einen Skalierungsfehler hat. Auf dem Desktop sieht die Smartphone-Version gut aus - aber beim Aufruf über ein Smartphone fehlt die seitenbreite Skalierung.
Komme einfach nicht weiter, den Fehler zu finden - brauche Eure Hilfe... hat jemand einen Tipp, oder ist das evtl. ein Migrations-Bug?
Beispiel-Link aus Datenschutzgründen wieder entfernt

Kommentare

marboe schrieb am 21.01.2022 um 07:23 Uhr

oder ist das evtl. ein Migrations-Bug?

Das ist absolut möglich. Der Sprung ist gewaltig.

Ich kann das Problem nicht nachvollziehen. Zwei Anmerkungen dennoch:
- auf der mobilen Seite solltest du die Navi fixieren zum angenehmeren surven.
- auf der Desktopseite finde ich folgendes:

Mobil ist gar kein Slider sichtbar.

Ich würde grundsätzlich eine Neuerstellung anstreben. Es handelt sich um eine gewerbliche Seite. Da ist eine Optimierung des Codes sinnvoll, da sie Googlerelevant ist. Die neueste Version des XaraDesigners bietet hier doch einiges Neue wie zB webp-Bilder und eine grundlegende Zoomfunktion der Webseite. Letztere zoomt die Inhalte innerhalb der Breakpoints. Das würde ich auf jeden Fall mal ausprobieren.

Gruß Marboe

HouseCat schrieb am 22.01.2022 um 07:49 Uhr

Mobil ist gar kein Slider sichtbar.

Wurde jetzt korrigiert

HouseCat schrieb am 22.01.2022 um 07:52 Uhr

Ich kann das Problem nicht nachvollziehen.

... heißt das, bei Dir sieht die mobile Version (auf einem Smartphone) gut aus? Oder heißt das, Du kannst auch keinen Fehler finden... Danke für Deine Rückmeldung

BilderMacher schrieb am 22.01.2022 um 09:23 Uhr

Bei mir sieht es auf dem Handy so aus.

Das ist wohl falsch?

Hast du einen Vergleich, wie es tatsächlich gedacht ist?

marboe schrieb am 22.01.2022 um 12:20 Uhr

Ich sehe das da:

Gruß Marboe

BilderMacher schrieb am 22.01.2022 um 12:55 Uhr

Habe noch auf einem zweiten Gerät die Seite aufgerufen. Hier auch keine Variante [Smartphone]. Browser ist Firefox, aber auch Chrome zeigt keine Variante an.

HouseCat schrieb am 24.01.2022 um 18:19 Uhr

Bei mir sieht es auf dem Handy so aus.

seltsam - wenn Du nochmals nachschauen möchtest - bitte mit diesem Link testen: http://entwurf09.arteda.de/index.htm (Benutzer: entwurf09 Passwort: Arteda2020) Danke!!

HouseCat schrieb am 24.01.2022 um 18:20 Uhr

Habe noch auf einem zweiten Gerät die Seite aufgerufen. Hier auch keine Variante [Smartphone]. Browser ist Firefox, aber auch Chrome zeigt keine Variante an.

seltsam - wenn Du nochmals nachschauen möchtest - bitte mit diesem Link testen: http://entwurf09.arteda.de/index.htm (Benutzer: entwurf09 Passwort: Arteda2020) Danke!!

marboe schrieb am 25.01.2022 um 08:27 Uhr

Ich erhalte das Gleiche.

Gemäß dem Quelltext ist der Breakpoint hier:
@media screen and (min-width: 752px) {#xr_xr {top:0px;}} @media screen and (max-width: 751px) {#xr_xr {top:0px;}}

Die Anzeige differiert also sicher aufgrund der zugrunde liegenden Auflösung. Für ein Smartphone dürfte die bevorzugte Breite bei der Erstellung der Variante im Schnitt bei circa 300-460 px liegen.
Ich bekomme auf meinem Samsunggerät aufgrund der guten Auflösung auch nur die Desktopvariante deiner Datei angezeigt. Einfach weil die Auflösung zu gut ist.

Die Empfehlung muss also an dieser Stelle lauten: erstelle noch eine Variante für Tabletgröße. Dann verschiebt sich der Breakpoint auch für die Smartphones. Je nachdem welche Geräte du bedienen willst, sind die nötigen Größen der Varianten durchaus unterschiedlich. I.d.R. kann man die Vorgaben des Designers übernehmen. Oder man wählt zB 1920 / 640 / 360 so wie ich das aktuell tue, um auch die 4kMonitore gut zu bedienen. Der Breakpoint ist dadurch bei der Hälfte der Differenz von 640 und 360 - also bei :
@media screen and (min-width: 1280px) {#xr_xr {top:0px;}} @media screen and (max-width: 499px) {#xr_xr {top:0px;}} @media screen and (min-width: 500px) and (max-width: 1279px) {#xr_xr {top:0px;}
Hier noch ein Bild meiner Einstellungen:

Zusätzlich kann im Designer noch der Zoom genutzt werden, der innerhalb der Varianten für eine bessere Darstellung sorgt (fit to width). Das musst du austesten. Beispiel aus meinem Vorschlag:

Die Voransicht im Browser ist für alle Varianten möglich indem man einfach das Fenster verkleinert. Welche Auflösung die Smartphones der User haben, differiert sehr und kann natürlich im Netz recherchiert werden. Gruß Marboe

BilderMacher schrieb am 25.01.2022 um 08:37 Uhr

wenn Du nochmals nachschauen möchtest

Keine Änderung der Darstellung. Keine Anzeige auf dem Handy Samsung A21 S. Ist dann wohl zu schmal? Will aber auch nicht den Lappi hochkant halten. 😉

marboe schrieb am 25.01.2022 um 13:11 Uhr

wenn Du nochmals nachschauen möchtest

Ist dann wohl zu schmal? Will aber auch nicht den Lappi hochkant halten. 😉

Nee, genau anders rum.
Schaut man mit einem Desktopbrowser und verkleinert die Seite extrem, bekommt man auch die Smartphonevariante angezeigt. Sie springt also zu spät wenn ich @HouseCat ´s Wunsch richtig verstehe.
Dein Smartphone zeigt also auch eine Webseite mit mehr als 700px noch als Desktop; d.h. deine Auflösung ist auch sehr gut bzw üblich. Deswegen hatte ich ja als Empfehlung geschrieben: wenn HouseCat definitv mobile Geräte bedienen will, muss er eine schmalere Seite anlegen. Eine wesentlich schmalere. Aktuell ist sie viel zu breit. Gruß Marboe