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, ...

Jetzt mitmachen!

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