Frage stellenIch möchte eine Seite für Mobile Geräte (iPhone, Handy, PDA, usw.) programmieren, nur leider will mir der Anfang schon nicht gelingen!
Hier die Seite: http://m.chris-web.de/
(Die Seite ist natürlich noch nicht fertig!
Ich versuche erst das Gerüst eingerichtet zu bekommen ...)
Auf dem Safari des iPhone und am Browser eines Samsung jet 8000 wird die Seite nicht richtig dargestellt! Die gesamte Seite ist in der Höhe ausgefüllt und die Schrift ist winzig an die Linke Seite gequetscht! siehe hier
Am Opera des iPhones geht die Seite aber, sie ist schön lesbar ... ich denke aber das liegt an der Fehlerkorrektur des Opera ... siehe hier
Ich möchte, das die Seite überall so breit ist, wie das Logo oben (320px) und man nicht links scrollen kann, sondern nur nach unten ...
Wie soll ich anfangen, das die Seite ordentlich auch allen (aktuellen) mobilen Browsern läuft?
thx
Community rund um Cascading Style Sheets, Tutorials & KnowHow für Webmaster
Seite für Mobile Geräte programmieren
11 Beiträge • Seite 1 von 1
Seite für Mobile Geräte programmieren
von Crys » 16.09.2010, 21:49
-
Crys - Gelegenheitsleser
- Beiträge: 17
- Registriert: 05.09.2009, 21:19
Re: Seite für Mobile Geräte programmieren
von sejuma » 17.09.2010, 06:42
Indem du zunächst das für alle HTML-Seiten erforderliche Grundgerüst beachtest:
In deinem Fall fehlt der schließende </head> und die Seite hat keinen body.
http://de.selfhtml.org/html/allgemein/grundgeruest.htm
In deinem Fall fehlt der schließende </head> und die Seite hat keinen body.
http://de.selfhtml.org/html/allgemein/grundgeruest.htm
- sejuma
- Vielposter
- Beiträge: 805
- Registriert: 15.07.2009, 17:46
Re: Seite für Mobile Geräte programmieren
von Crys » 17.09.2010, 11:11
sry, mein Fehler!
Muss ich gestern Nacht irgendwie gelöscht haben ... daran liegt es aber nicht!
Muss ich gestern Nacht irgendwie gelöscht haben ... daran liegt es aber nicht!
-
Crys - Gelegenheitsleser
- Beiträge: 17
- Registriert: 05.09.2009, 21:19
Re: Seite für Mobile Geräte programmieren
von sejuma » 17.09.2010, 12:56
Das stimmt immer noch nicht.
Du hast nach dem head den body geschlossen statt geöffnet.
Du hast nach dem head den body geschlossen statt geöffnet.
- sejuma
- Vielposter
- Beiträge: 805
- Registriert: 15.07.2009, 17:46
Re: Seite für Mobile Geräte programmieren
von Crys » 17.09.2010, 13:33
oh, sry ... aber man kann sich auch an Kleinigkeiten aufhalten!
Die komplette m.chris-web.de Seite ist es w3c "XHTML 1.0 Strict" valide! Wie zu erwarten hat es aber nicht zum lösen meines Problems beigetragen ...
So, wie löse ich jetzt mein Problem?
Ich habe mal den Hintergrund blau gefärbt ... alles blaue sollte nicht sichtbar sein!
Die komplette m.chris-web.de Seite ist es w3c "XHTML 1.0 Strict" valide! Wie zu erwarten hat es aber nicht zum lösen meines Problems beigetragen ...
So, wie löse ich jetzt mein Problem?
Ich habe mal den Hintergrund blau gefärbt ... alles blaue sollte nicht sichtbar sein!
-
Crys - Gelegenheitsleser
- Beiträge: 17
- Registriert: 05.09.2009, 21:19
Re: Seite für Mobile Geräte programmieren
von sejuma » 17.09.2010, 15:15
Validitätsfehler sind keine Kleinigkeiten und können sehr oft Fehler in der Darstellung und Funktionsfähigkeit verursachen.
Ich kenne mich mit mobilen Layouts nicht aus. Generell sollte es aber keine wesentlichen Unterschiede zum Normal-Layout geben. Meine eigene Seite erscheint im i-phone recht ordentlich.
Versuch's mal mit einer Zentrierung des body und einer relativen Schriftgröße:
Ich kenne mich mit mobilen Layouts nicht aus. Generell sollte es aber keine wesentlichen Unterschiede zum Normal-Layout geben. Meine eigene Seite erscheint im i-phone recht ordentlich.
Versuch's mal mit einer Zentrierung des body und einer relativen Schriftgröße:
- Code: Alles auswählen
body {
width: 320px;
margin: 0 auto;
padding: 0px;
background: #fff;
font-family: Verdana, Sans-Serif;
font-size: 1em;
background: #fff;
}
- sejuma
- Vielposter
- Beiträge: 805
- Registriert: 15.07.2009, 17:46
Re: Seite für Mobile Geräte programmieren
von Azra » 17.09.2010, 19:22
Unter optimieren verstehe ich etwas anderes.
Eine eigene Domain anzulegen ist ein nettes Feature, aber war eigentlich unnötig, denn es ist möglich die Auflösung rein mit CSS im <head> - Bereich abzufangen und unterschiedliche bzw. das richtige ausgelagerte Stylesheet zu laden.
http://css-tricks.com/resolution-specific-stylesheets/
Eine eigene Domain anzulegen ist ein nettes Feature, aber war eigentlich unnötig, denn es ist möglich die Auflösung rein mit CSS im <head> - Bereich abzufangen und unterschiedliche bzw. das richtige ausgelagerte Stylesheet zu laden.
http://css-tricks.com/resolution-specific-stylesheets/
“HTML is the language for describing the structure of Web pages.”
“CSS is the language for describing the presentation of Web pages, including colors, layout, and fonts.”
Noch weitere Probleme? Kontakt über meine Webseite - simonduda.ch
“CSS is the language for describing the presentation of Web pages, including colors, layout, and fonts.”
Noch weitere Probleme? Kontakt über meine Webseite - simonduda.ch
-
Azra - Stammuser
- Beiträge: 422
- Registriert: 04.02.2010, 08:36
- Wohnort: (Alten)bochum
Re: Seite für Mobile Geräte programmieren
von Crys » 18.09.2010, 15:49
@ sejuma:
Die Seite wird so auch nur zentriert dargestellt, der Rest bleibt gleich:
Die Seite muss dem Browser doch irgendwie sagen, das die Seite so groß ist ... ich weiß nur nicht wie ... auf anderen Seiten (http://google.de, http://computerbase.mobi, http://de.m.wikipedia.org, ...) klappt das ja ...
@ Azra:
Ich will ja nicht meine Seite für mobile Geräte optimieren, sondern eine Seite für mobile Geräte schreiben!
Klar gibt es CSS-Code zum trenne von Medien, aber ich will auch den Inhalt meiner mobilen Seite kürzen
Die Seite wird so auch nur zentriert dargestellt, der Rest bleibt gleich:
Die Seite muss dem Browser doch irgendwie sagen, das die Seite so groß ist ... ich weiß nur nicht wie ... auf anderen Seiten (http://google.de, http://computerbase.mobi, http://de.m.wikipedia.org, ...) klappt das ja ...
@ Azra:
Ich will ja nicht meine Seite für mobile Geräte optimieren, sondern eine Seite für mobile Geräte schreiben!
Klar gibt es CSS-Code zum trenne von Medien, aber ich will auch den Inhalt meiner mobilen Seite kürzen
-
Crys - Gelegenheitsleser
- Beiträge: 17
- Registriert: 05.09.2009, 21:19
Re: Seite für Mobile Geräte programmieren
von sejuma » 20.09.2010, 06:25
Dann lass mal überall die 320px Breite weg und nimm
- Code: Alles auswählen
html, body {width: 100%;}
- sejuma
- Vielposter
- Beiträge: 805
- Registriert: 15.07.2009, 17:46
Re: Seite für Mobile Geräte programmieren
von Crys » 20.09.2010, 19:53
@ sejuma:
Ist doch schon so!?
In den einfach width, height Sachen habe ich schon alle ausprobiert ...
Ich will doch nur, das die Seite soweit verkleinert wird, das kein unnötiger Rand mehr da ist ... der bringt nicht und ich weiß auch nicht, wieso der dargestellt wird ...
Am besten wäre es, wenn 1px auf der Seite auch 1px auf dem mobilen Browser groß ist ...
... ich hab keine Ahnung, was ich noch machen soll ... auf so vielen anderen Seiten funktioniert es ja ... ich weiß nicht, was ich falsch mache ... ist echt frustrierend!
Ist doch schon so!?
In den einfach width, height Sachen habe ich schon alle ausprobiert ...
Ich will doch nur, das die Seite soweit verkleinert wird, das kein unnötiger Rand mehr da ist ... der bringt nicht und ich weiß auch nicht, wieso der dargestellt wird ...
Am besten wäre es, wenn 1px auf der Seite auch 1px auf dem mobilen Browser groß ist ...
... ich hab keine Ahnung, was ich noch machen soll ... auf so vielen anderen Seiten funktioniert es ja ... ich weiß nicht, was ich falsch mache ... ist echt frustrierend!
-
Crys - Gelegenheitsleser
- Beiträge: 17
- Registriert: 05.09.2009, 21:19
Re: Seite für Mobile Geräte programmieren
von Crys » 23.09.2010, 13:09
waaaaaaaaaaaaaaaaaaaaaaaaa 
Ich hab die Lösung ... am css usw. hat alles gestimmt ... ich habe nur einen meta tag ins xhtml eingefügt:
Und komischer weiße geht es jetzt am iPhone, iPod, als auch am Samsung Jet ... wieso auch immer ...
Bin darauf gekommen, als ich den Quellcode der mobile Wiki Seite zerlegt hab
So sollte die Darstellung aussehen:
http://m.chris-web.de/
So, jetzt kann ich mich daran machen, die Seite anständig zu gestalten!
Trotzdem, danke für die Hilfe an Alle!
Ich hab die Lösung ... am css usw. hat alles gestimmt ... ich habe nur einen meta tag ins xhtml eingefügt:
- Code: Alles auswählen
<meta name='viewport' content='width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;' />
Und komischer weiße geht es jetzt am iPhone, iPod, als auch am Samsung Jet ... wieso auch immer ...
Bin darauf gekommen, als ich den Quellcode der mobile Wiki Seite zerlegt hab
So sollte die Darstellung aussehen:
http://m.chris-web.de/
So, jetzt kann ich mich daran machen, die Seite anständig zu gestalten!
Trotzdem, danke für die Hilfe an Alle!
-
Crys - Gelegenheitsleser
- Beiträge: 17
- Registriert: 05.09.2009, 21:19
11 Beiträge • Seite 1 von 1
Moderatoren: Laus, Moderatoren
Ähnliche Beiträge zu "Seite für Mobile Geräte programmieren"
- 3 Seiten Box Shadow
- Zwei Hintergrundbilder mit flexiblem Seitenrand
- Fluid nur auf einer Seite
- menu darstellungsfehler für IE7
- Überschriften für mehrere Aufzählungslisten (ul/li)
- Liste von CSS-Regeln für tag a wird nur von IE interpretiert
- Wer hilft mir beim Programmieren??
Zurück zu: CSS für Fortgeschrittene
Wer ist online?
Mitglieder in diesem Forum: 0 Mitglieder und 1 Gast