HP für Tablet und Smartphon optimieren

  • Hallo zusammen,


    meine HP


    Unterwegs in Mexiko


    wird wohl auf Tablets und Smartphones nicht richtig angezeigt. Hierzu habe ich schon den Tipp bekommen, diesen Code:


    <meta name="viewport" content="width=1024" >


    in den Header einzufügen.


    Allerdings habe ich hierzu absolut keine Ahnung, was dieser Code bewirkt und wie ich testen kann, wie meine Seite auf Smartphones und Tablets aussieht.


    Den Hintergrund habe ich mit einem Java-Script versehen, der das Hintergrundbild immer über den gesamten Bildschirm aufspannt. Eventuell verursacht der Probleme.


    Kann mir bitte jemand ein paar Tipps geben?


    Danke und noch einen schönen Tag - Wolfgang


    PS Auch sonst freue ich mich über jede Kritik und Anregung

  • Also für den Hintergrund könntest du auch


    Verwenden (spart unnötiges laden von scripts).


    Zu deinem Problem:
    Ich sehe keins, auf dem Iphone(4s) wird alles richtig angezeigt, beschreib genauer was dich stört! :)

  • Da iPhone sowieso erstmal alles so darstellt, wie auf dem rechner, ist das leider nicht das beste Beispiel ;)


    Zum Hintergrund: hoer auf wolf, nimm CSS! Aber da gibts noch nen anderen Trick, um den Hintergrund zu fuellen (auch bei Portraitmodus von Smartphones/Tablets):

    CSS
    background-size: cover;

    Um die anderen Moeglichkeiten, die CSS3 bietet, kennen zu lernen, gucke hier: W3 Schools (en)


    Der meta Tag, den du da nennst, gibt den Anzeigegeraeten die Groesse des Anzeigebereichs, des sog. "viewports", vor. D.h., egal, welches Geraet du nimmst, ob eines mit einer Pixelbreite von 1920 oder 320, die Anzeigebreite wird bei dir immer auf 1024 festgelegt.
    Das ist so aber nicht gut, weil fuer die einen zu klein, fuer die anderen zu gross. mediaevents, liefert hier eine sehr gute Erklaerung der media queries, welche fuer Responsive Webdesign benoetigt werden, und spricht auch deinen meta Tag fuer den viewport an und erklaert, was genau der macht. Schau dir das mal an, setze es in die tat um, und frag deinen Freund mit dem Tablet, wie das aussieht ;)
    Oder such dir Webtools, die die Breite simulieren, aendere die Groesse deines Browserfensters, ...

  • Hallo zusammen,


    als Neuling versuche ich gerne nicht stumpf einen neuen Threat zu erstellen, also hoffe ich ich darf mich an diesen alten hier mal anhängen.

    Falls das ungern gesehen wird, bitte eine kurze Info geben :)


    2021 habe ich unseren Onlineshop neu aufgesetzt. Optisch vielleicht keine Meisterleistung, aber er funktioniert. Als absoluter Neuling in dieser Materie habe ich irgendwie den Viewport ausgeknippst.
    Zumindest hoffe ich das hier korrekt ausgedrückt zu haben.

    Ich weiß noch, dass ich irgendwelche Werte geändert habe, kann es aber beim Besten Willen nicht mehr finden, welche das waren ;(

    Google nimmt uns jetzt natürlich aus den Suchergebnissen raus und das wollen wir gerne wieder ändern.

    So hoffe ich, dass jemand mit Ahnung mir hier helfen kann.


    Hier mal der Link: https://www.hochdruck-musick.de/HHG/index.php

  • als Neuling versuche ich gerne nicht stumpf einen neuen Threat zu erstellen, also hoffe ich ich darf mich an diesen alten hier mal anhängen.

    Falls das ungern gesehen wird, bitte eine kurze Info geben :)

    Info. Mach bitte einen neuen Thread auf, sich an über 10(!) Jahre alte Threads zu hängen ist nicht sinnvoll. Wobei mir ohnehin nicht so ganz klar ist wo dein Problem liegt (aber nicht hier im Thread schreiben, mach einen neuen auf!) …

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!