Erstellte Website auf Smartphone zu klein skaliert

sinkpäd · 14. März 2022

Hallo zusammen,

ich habe heute für eine anstehe Hochzeit mit dem Demoeditor von https://grapesjs.com/demo.html eine kleine Infoseite zusammengebaut, die für einige Wochen auf meiner NAS gehostet wird.

Der Editor bietet schon verschiedene Ansichten für Desktop, Tablet und Smartphone an und ich habe darauf geachtet, dass die Seite auf allen drei Ansichten gut und leserlich aussieht.

Das Problem ist jetzt aber, dass beispielsweise mein iPhone 13 Pro die Seite fast ähnlich darstellt wie mein 25" WQHD Bildschirm @125% Win-Skalierung, d.h. der Text ist auf dem iPhone zu klein wenn man nicht zoomt oder die Skalierung anpasst (wofür manche schon wieder zu doof sind, daher soll es gleich passen). Es zeigt nicht die mobile Seite an. Wenn ich im iPhone die Skalierung auf 150% stelle, kann man es schon ganz ordentlich lesen, zur eigentlichen Mobilansicht wechselt es aber erst bei einer Skalierung von 250%.

Kann man da mit einfachen Mitteln was dagegen tun? Die Seite soll out of the Box auf Mobilgeräten groß genug sein

sandreas · 14. März 2022

Du könntest die ganze Seite auf Telefonen per CSS zoomen...

CSS:

body {
    zoom: 2;
    -moz-transform: scale(2);
    -moz-transform-origin: 0 0;
}

Müsstest nur noch einen media-query hinzufügen, der die Geräte, auf denen du Zoomen willst, adressierst.

BFF · 15. März 2022

Und raus finden als was das iPhone 13 Pro erkannt wird.
Wenn das mit zu vielen Pixeln rueber kommt, geht das Teil u.U. als Tablet/Desktop durch die Filter.

netzgestaltung · 15. März 2022

Ich würde zunächst den meta tag "viewport" ansehen. Der sollte ca so aussehen:

HTML:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=5" />

zoom: ist doch eigentlich ein IE6 proprietärer CSS Key, das sollte es mmn nicht mehr geben

Wenn ich direkt das geladene Template bei grapejs exportierte ist der <head> ~~ganz~~ fast leer, daher schau mal in https://wiki.selfhtml.org/wiki/HTML/Elemente/meta rein, was es noch so alles gibt.

Mehr Details: Ein Pixel ist nicht ein Pixel(englisch) https://developer.mozilla.org/en-US/docs/Web/HTML/Viewport_meta_tag

Suche

Erstellte Website auf Smartphone zu klein skaliert

sinkpäd

Lt. Commander

sandreas

Lieutenant

BFF

¯\_(ツ)_/¯

netzgestaltung

Captain

Ähnliche Themen