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

  • Die letzte Antwort auf dieses Thema liegt mehr als 365 Tage zurück. Das Thema ist womöglich bereits veraltet. Bitte erstelle ggf. ein neues Thema.

    • :)
    • :(
    • ;)
    • :P
    • ^^
    • :D
    • ;(
    • X(
    • :*
    • :|
    • 8o
    • =O
    • <X
    • ||
    • :/
    • :S
    • X/
    • 8)
    • ?(
    • :huh:
    • :rolleyes:
    • :love:
    • :pinch:
    • 8|
    • :cursing:
    • :wacko:
    • :thumbdown:
    • :thumbup:
    • :sleeping:
    • :whistling:
    • :evil:
    • :saint:
    • <3
    • :!:
    • :?:
    Maximale Anzahl an Dateianhängen: 10
    Maximale Dateigröße: 1 MB
    Erlaubte Dateiendungen: bmp, gif, jpeg, jpg, pdf, png, txt, zip