Logo in mobiler Ansicht unscharf

  • Hallo,


    das hat zunächst nichts mit der mobilen Ansicht zu tun, sondern mit der Auflösung des mobilen Geräts. Viele mobile Geräte (wie z.B. iPhones oder iPads) haben hochaufgelöste Bildschirme (Retina), die die doppelte (oder mehr) Auflösung eines normalen Desktop-Rechners bieten.


    Die beste Darstellung erhält man durch die Verwendung von Vektorgrafiken (SVG), die beliebig skaliert werden können (im Gegensatz zu Pixelbildern). Da Ihr Logo aber den Tennisball als Pixelbild enthält, scheidet das wahrscheinlich aus. Wenn Sie den Tennisball auch als Vektorgrafik erstellen können, dann könnten Sie das Logo als .svg Grafik einfügen (Adobe Illustrator z.B. kann .svg Grafiken exportieren) und das Problem ist gelöst.


    Falls das nicht möglich ist, hilft folgender Trick:

    • Ihr Logo ist 174 x 42 pixel groß
    • Erstellen Sie das Logo in 348 x 84 pixel Größe (doppelte Größe)
    • In den Layout-Einstellungen belassen Sie die Maße des Logo bei 174 x 42px und importieren das neue, doppelt so große Logo

    Nun wird das Logo bei 174 Pixeln Breite quasi in doppelter Auflösung dargestellt. Das sollte auch in der Desktop-Auflösung noch ordentlich aussehen.

  • Hallo Stefan,


    habe das Logo leider nur als .png Bild.

    Hab es nun auf 348x84 pix vergrößert. Leider ist es immer noch unscharf auf dem Handy.

    Werd mir die Arbeit machen und ein neues Logo in SVG erstellen.


    Danke für die ausführliche Erklärung :)

  • Hallo,


    Das neue Logo heißt "348px-kopie.png" ist aber tatsächlich auch nur 174px breit. Vielleicht hatte ich mich in meiner Beschreibung vertan, und sie müssen vor einem neu Importieren in den Layout-Einstellungen doch die tatsächlichen Maße eingeben, also 348 x 84, dann die neue Datei importieren, auf OK klicken und danach den Layout-Editor erneut öffnen und nun nur die Maße auf 174 x 42px ändern (damit eine Skalierung beim Import vermieden wird).

  • Also ich habe das schon mehrfach so gemacht und es hat geklappt. Ihr Logo hat nun auch die tatsächliche Größe von 348x84px und sieht im Orginal scharf aus:

    https://hosting.zeta-producer.…01/assets/348px-kopie.png


    Ich vermute nun haben Sie, wenn Sie es mobil betrachten, einfach noch die alte Seite im Browser-Cache. Als ggf. vor der Kontrolle mal den Browser-Cache löschen bzw. die Seite mehrmals neu laden.


    Bei mir sieht die Seite mobil nun so aus (ich finde das Logo scharf genug):


  • Hab die Seite ein paar mal akualisiert, aber mein Browser zeigte immer noch das Logo unscharf...obwohl die Inhalte sich geändert haben.

    Nun hab ich über Geheimen Modus die Seite neu geladen.....und siehe da !!! Alles gut!

    Vielen Dank :)