HP für Tablet und Smartphon optimieren

[Ratoncito]

Hallo zusammen,

meine HP 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.

Kann mir bitte jemand ein paar Tipps geben?

Danke und noch einen schönen Tag - Wolfgang

[Jasko]

Eine Seite für Smartphone und Tablet zu optimieren ist gar nicht so einfach. Solche Seiten oder Designs nennt man auch responsive Design. Dazu muss man eine Seite auch speziel so coden, doch einige Tags kann man benutzen um seine Seite auch so besser sichtbar auf Tablets und Co zu machen.

Ein Bild sagt mehr als 1000 Worte, also zeige ich gleich mal zwei um darzustellen was dieser Tag macht.

Nehmen wir mal als Beispiel das iPhone da ist die Breite als width auf 980px begrenzt, und wenn man den Tag von dir verwendet passiert das hier, bei einem Design das Breiter als 980px bzw 1024px ist:

themify-example.jpg (71.08 KiB) 5382 mal betrachtet

Bei einem Design das kleiner ist passiert das hier:

smaller-viewport-width.png (20.27 KiB) 5382 mal betrachtet

Ich hoffe es ist jetzt verständlicher was die machen.

[charlyjaku]

Wenn ich Dich richtig verstanden habe, dann kann sich jeder diesen Code bedenkenlos in den Header einbauen ?!?

[Jasko]

Klar, aber eine kleine Überprüfung ob alles so ist wie man es will schadet nicht. Wenn man kein eigenes tebllet hat gibt es simulatoren, massig im web, sonnst einen Freund mal nachschauen lassen.

MfG

[npage-user]

Mit Optimierungen im mobilen Bereich beschäftige ich mich momentan auch ein bisschen, bin da aber bis jetzt noch nicht so wirklich weit gekommen. Sowas ist heutzutage gar nicht schlecht, denn es wird immer häufiger über Tablets oder Smart- bzw. iPhones zugegriffen. Sehe ich immer wieder in den Besucherstatistiken, dass dieser Anteil gar nicht gering ist.

[awardfan]

Um welche HP geht es denn und was meinst du mit "nicht richtig"?

[thaileben]

Hier ist eines zum testen http://www.onlyfree.de/generatorresolution.php
jedoch für smartfon kommt es auch darauf an welche Andorid version drauf ist
und für den apfel gibt es auch speziell codes

hier ist was zum nachlesen http://www.meine-erste-homepage.com/web ... mieren.php

Jürg

[Ratoncito]

Hallo zusammen,

wegen dem Hintergrund habe ich eventuell eine Lösung.

Es sollte mit dem CSS-Befehl "cover" funktionieren.

Dazu muss ich aber einige Änderungen an der Seite vornehmen und dafür fehlt mir im Moment die Zeit. Wenn ich eine funktionierende Lösung habe, werde ich sie hier vorstellen.

Noch ein schönes Wochenende - Wolfgang