Spezialscript HTML für i-Pads erforderlich?

Hallo,

ich bin mir nicht sicher, ob meine Frage auf dieser Seite richtig angebracht ist:

Meine mit HTML, CSS und eurer Hilfe erstellte HP funktioniert einwandfrei, nachdem einige Anweisungen durch PHP ersetzt wurden. Ich teste das unter Windows 7 mit den Browsern IE7 bis IE10, Firefox und Seamonkey. Was ich nicht geprüft habe, ist Safari auf einem i-Pad.
Gestern sah ich die HP auf so einem Gerät, was mich ziemlich entsetzte: Die angezeigten Schriften (im Code meist „Comic Sans“) gingen von Schreibschrift klein bis groß bis hin zu Schrift ähnlich Arial. Scrollen (per Finger) einer in einer Box angezeigten Datei geht überhaupt nicht, da stets die ganze Seite gescrollt wird, die aber, weil sie nur Bildschirmgröße hat, nicht wirklich zu scrollen ist. Dadurch zuckt sie lediglich bis zum oberen Bildschirmrand und rutscht wieder zurück zur Bildmitte. Meine Navigationsleiste funktioniert auch nicht korrekt, da Tasten der 2. Ebene unter der Haupttaste, die aufgeklappt werden, wenn die Maus über der Haupttaste schwebt, nur dann aufklappen, wenn keine der „Untertasten“ vorher betätigt wurden.

Meine Fragen:
Ist ein Script aus HTML und CSS, ergänzt mit PHP-Anweisungen, für i-Pads ungeeignet? Sind ggf. solche Anweisungen wie „Fremddatei in Box anzeigen“, wenn anzuzeigende Info länger ist, als die Höhe der Box, zu vermeiden? Gibt es „Spielregeln“ speziell für i-Pads, die beim Code für die Homepage beachtet werden müssen? Wäre es eine Lösung, das gesamte Script in PHP zu schreiben?
Ist jemandem dieses Verhalten eines i-Pads bekannt?

Über Hinweise würde ich mich freuen.
Gruß
Pauli

Moin,

Gestern sah ich die HP auf so einem Gerät, was mich ziemlich
entsetzte: Die angezeigten Schriften (im Code meist „Comic
Sans“) gingen von Schreibschrift klein bis groß bis hin zu
Schrift ähnlich Arial.

Nicht jede Schrift ist auf jedem Endgerät installiert, weswegen man bei font-family ja immer möglichst viele (ähnliche) angibt und nicht auf eine generische Schriftart (wie „sans-serif“) verzichten darf.

Scrollen (per Finger) einer in einer
Box angezeigten Datei geht überhaupt nicht

Kann ich jetzt nichts zu sagen - geht aber auf nem Desktop offensichtlich problemlos? Auch mit Mausrad?

Meine Navigationsleiste funktioniert
auch nicht korrekt

Versteh ich jetzt nicht wirklich.

Ist ein Script aus HTML und CSS

HTML und CSS sind Beschreibungssprachen, keine Script (und damit Programmier-)sprachen. „Script“ ist hier also unpassend. SCNR :smile:

ergänzt mit PHP-Anweisungen,
für i-Pads ungeeignet?

Definitiv nein. Dann wäre das WWW für iPads ungeeignet. Dass Du PHP benutzt, ist für das iPad nichtmal ersichtlich, denn das läuft ja nur serverseitig. Aber HTML und CSS sollten die Webbrowser mobilder Endgeräte schon können! Wobei im ALK-Brett schon erwähnt wurde, dass sich eine in manchen Dingen anders verhalten, insbesondere Safari, der z.B: Probleme mit der Anzeige von Frames macht.

Sind ggf. solche Anweisungen wie
„Fremddatei in Box anzeigen“

Es gibt für Endgeräte keine Anweisung der Art. Der Browser weiß nichts davon, woher die Inhalte in dieser Box kommen, sie stehen für ihn da ganz normal drin.

Gibt es „Spielregeln“ speziell für i-Pads

Ich würde nach Bugs in iPad-Browsern googlen.

Der Internet Explorer bis Version 6 hat ja auch etliche Zicken gemacht, so dass manch eine Website auf Desktop-PCs nicht richtig funktioniert hat.

Wäre es eine Lösung, das gesamte Script in PHP
zu schreiben?

Du hast noch nicht verstanden, dass PHP serverseitig läuft und beim Browser gar nicht ankommt.
Der Browser sieht keinen Unterschied zwischen einer statischen Seite und einer, die von PHP erzeugt wurde.

Ist jemandem dieses Verhalten eines i-Pads bekannt?

Ich habe noch nie so ein Ding in der Hand gehabt, sorry.

Über Hinweise würde ich mich freuen.

Jetzt sind die Zeiten des buggy IE vorbei, jetzt kommen vermutlich die Zeiten der buggy Mobilbrowser.

Liebe Grüße,
-Efchen

Hier ist z.B. eine Seite, auf der viele Unterschiede gesammelt sind. Da sind schon teilweise Sachen dabei, die auf Desktop-Browsern eigentlich seit vielen Jahren problemlos funktionieren.
http://stackoverflow.com/questions/3006647/list-of-k…

Hallo Efchen,

danke für Deine Antwort, danke auch für den Link. Ich beschäftige mich jetzt erst mal damit, bevor ich irgendwas an der HP ändere.

beste Grüße
Pauli

Hi Pauli,

mit fortschreitender IPad-Version gleicht sich sein Browser den anderen an. Außerdem gibt es immer mehr Umsteiger vom IPad auf Android-Tablets. Den Nutzern (besonders älterer) IPads fällt nämlich auf, dass ein Teil Internet des Internets auf dem IPad hässlicher aussieht als auf anderen Geräten, oder sogar überhaupt nicht funktioniert (besonders Flash).

Das Problem erledigt sich also mehr oder weniger von selbst.

Schöne Grüße,

Mohamed.

Moin,

danke für Deine Antwort, danke auch für den Link. Ich
beschäftige mich jetzt erst mal damit, bevor ich irgendwas an
der HP ändere.

Die meisten Unterschiede werden auf fehlerhafter Interpretation von CSS basieren.
Daher könntest Du mit unterschiedlichen Stylsheets experimentieren, so dass die Website auf Desktop-Computern nicht anders dargestellt wird. So Dinge wie „media=handheld“ im link-Tag (beim Stylesheet) oder Media Queries können Dir dabei helfen.

Mangels eigener Erfahrung damit kann ich Dir nicht sagen, wie Du eindeutig ein iPad erkennen kannst, aber das findest Du vielleicht mit diesen Tipps auch selbst raus.

Viel Erfolg,
-Efchen

Hallo,

Gestern sah ich die HP auf so einem Gerät, was mich ziemlich
entsetzte: Die angezeigten Schriften (im Code meist „Comic
Sans“) gingen von Schreibschrift klein bis groß bis hin zu
Schrift ähnlich Arial.

Efchen hat ja shcon was dazu geschrieben. Entweder Schriftarten, die auf allen Clients vorhanden sind oder Webfonts.

Scrollen (per Finger) einer in einer
Box angezeigten Datei geht überhaupt nicht, da stets die ganze
Seite gescrollt wird, die aber, weil sie nur Bildschirmgröße
hat, nicht wirklich zu scrollen ist.

Ist auch völlig logisch. Da der Fokus auf der Seite liegt, wird diese gescrollt. Touchgeräte kennen kein dem Mouseover ebenbürtiges Fingerover o.ä.

Meine Navigationsleiste funktioniert
auch nicht korrekt, da Tasten der 2. Ebene unter der
Haupttaste, die aufgeklappt werden, wenn die Maus über der
Haupttaste schwebt, nur dann aufklappen, wenn keine der
„Untertasten“ vorher betätigt wurden.

Und auch hier gehe ich von einem Mouseover für das Ausklappen des Menüs aus - das funtkioniert auf Touchgeräten nicht.

Gruß

osmodius

Meine Fragen:
Gibt es „Spielregeln“
speziell für i-Pads, die beim Code für die Homepage beachtet
werden müssen? Wäre es eine Lösung, das gesamte Script in PHP
zu schreiben?

Hallo Pauli, das mit den Schriftarten wurde ja bereits geschrieben. Hier einen auf Mobile Endgeäte ausgelegten Lösungsansatz. Dieser besteht aus einer Weiterleitung von einer Basisseite (für PC vorgesehen) auf eine Seite ausgelegt für Mobile Endgeräte:
Nach dem aufrufen der Seite waveswebdesign.de von einem Mobien Endgerät aus, wird auf eine Seite weiter geleitet welche in der Breite reduziert aufgebaut ist. Hierbei wurde nur eine Navigation, oben quer eingestellt mit Klapp-Menu.
Wave

Moin,

Lösungsansatz. Dieser besteht aus einer Weiterleitung von
einer Basisseite (für PC vorgesehen) auf eine Seite ausgelegt
für Mobile Endgeräte:

Warum genau brauche ich da eine Weiterleitung und eine zweite Seite, so dass die Inhalte womöglich doppelt gehalten und gepflegt werden müssen?

Warum sagtest Du, geht das nicht mit Stylesheets?

Grüße,
-Efchen

… geht das nicht mit Stylesheets?

Sorry, wenn ich es richtig verstehe, damit ist doch alles inaktiv.
Wave

Nur weil
es
www.hvv.de gibt
und m.hvv.de

heisst das noch lange nicht das es zwei seiten gibt .
beides kann auf genau das gleiche php enden und einfach nur ein parameter
für abgespeckte inhalte . Lieder fehlen dann auch offt die funktionen die eine normale webseite bietet. deswegen sollte man wenn von einer version zur anderen gesprungen wird auch entsprechend die daten mitnehmen und das formular füllen etc .
Im Endefeekt sind es alle die gleichen Module nur mit einer anderen Ausgabe .
warum also 2 systeme bauen , es geht dochnur um die unterschiedliche ausgabe.

… geht das nicht mit Stylesheets?

Mir gelingt es nicht mit diesen Maßnahmen Stylesheets einzubauen:

CSS Dateien: mobil.css und smartphones.css erstellt und in die Hauptseite eingebunden.

Ergenis mit: http://www.active-value.de/responsive-design-viewer/

„diese Seite scheint nicht responsive zu sein“

Wo liegt der Fehler?

Mir gelingt es nicht mit diesen Maßnahmen Stylesheets
einzubauen:

???

CSS Dateien: mobil.css und smartphones.css erstellt und in die
Hauptseite eingebunden.

Kommt ja drauf an, wie.

Ergenis mit:
http://www.active-value.de/responsive-design-viewer/
„diese Seite scheint nicht responsive zu sein“

Was bedeutet diese Meldung letztendlich?

Wo liegt der Fehler?

Keine Ahnung. Ich kann Dir grad nicht folgen.

Lösungsansatz. Dieser besteht aus einer Weiterleitung von
einer Basisseite (für PC vorgesehen) auf eine Seite ausgelegt
für Mobile Endgeräte:

Warum genau brauche ich da eine Weiterleitung und eine zweite
Seite, so dass die Inhalte womöglich doppelt gehalten und
gepflegt werden müssen?

Zum einen das, zum anderen wird damit natürlich der Nutzer bevormundet: Du hast ein Mobilgerät (Smartphone? Tablet? XXX?), darum bekommst Du nur eine kastrierte Version zu sehen. Entscheidend ist der Viewport, nicht die Art des Systems.

Gruß

osmodius

Ergenis mit:
http://www.active-value.de/responsive-design-viewer/

Ich empfehle das herumzerren am Browserfenster, Strg+Umschalt+M unter Firefox oder Firesizer (ebenfalls FIrefox) statt irgendwelcher Websites zum darstellen von Websites.

Gruß

osmodius

Moin,

Zum einen das, zum anderen wird damit natürlich der Nutzer
bevormundet: Du hast ein Mobilgerät (Smartphone? Tablet?
XXX?), darum bekommst Du nur eine kastrierte Version zu sehen.
Entscheidend ist der Viewport, nicht die Art des Systems.

Ja, so habe ich mir das auch gedacht, als ich mir zum ersten Mal Media Queries angesehen habe. Aber dann ist mir doch ein Argument eingefallen:

Was ist mit Smartphone-Nutzern, die keine Flatrate haben (und bitte keine Argumente von wegen das gibts nicht)?

Geht da die Unterscheidung nicht auch über den Viewport hinaus? Verschiedene Stylesheets schön und gut, aber alles, was ausgeblendet wird, muss dennoch bezahlt werden.

Bei Hintergundbildern noch kein Problem, da kann man kleinere Versionen einbinden. Aber was ist mit Content-Images ()? Einer Mobilversion würde ich gerne ein kleineres Image spendieren, wo man erst das große bekommt, wenn man drauf klickt. Bei anderen Geräten kann auch gleich das größere Image kommen.

Und ein Vergleich mit Flatrate oder nicht bei Nicht-Mobilgeräten geht nicht, weil die nur zeitabhängig aber nicht volumenabhängig sind.

Gibts für solche Gedanken auch schon Lösungen oder sind „Smartphone-Nutzer ohne Flatrate selber Schuld“?

Danke für Eure Gedanken,
-Efchen

Hallo, vielen Dank für die verschiedenen Anregungen. Habe inzwischen die Seite waveswebdesign.de auf Responsiv umgestellt. Basis war dieser Link:

http://webdesignerwall.com/tutorials/responsive-desi…

Wave

Moin,

Hallo, vielen Dank für die verschiedenen Anregungen. Habe
inzwischen die Seite waveswebdesign.de auf Responsiv
umgestellt.

Da merke ich aber nichts davon.[*]
Wenn ich mein Fenster verkleinere, schieben sich zumindest die Bilder oben noch links aus dem Viewport raus. Ansonsten ändert sich auch am Layout nichts, der Browser positioniert die Elemente lediglich neu. Änderungen bei schmalem Viewport von 200px z.B. ändern die Inhalte nicht, das Menü ist immer noch horizontal, Scrollbalken sind überall.

Da sind komische Fehler in den Stylsheets, in mobil.css steht als CSS-Eigenschaft „h1:font-size“. Hä? Oder Tippfehler: „display:non“.

Liebe Grüße,
-Efchen
[*] Wenn ich ehrlich bin, habe ich aber auch die Aktionen für das verlinkte „Responsive Design“ noch nicht verstanden. Verständlicher ist da für mich http://mediaqueri.es/

Da sind komische Fehler in den Stylsheets, in mobil.css steht
als CSS-Eigenschaft „h1:font-size“. Hä? Oder Tippfehler:
„display:non“.

War ein Schreibfehler von mir :frowning:
Bin nach diesem Link vorgegangen:

http://webdesignerwall.com/tutorials/responsive-desi…

und hatte zumindest den Erfolg, dass auf dieser Prüfseite kein Warnhinweis mehr angezeigt wird:

http://www.active-value.de/responsive-design-viewer/

Den beigestellt Link werde ich mir noch ansehen:

Verständlicher ist da für mich http://mediaqueri.es/

Vielen Dank

Wave

Hallo, vielen Dank für die verschiedenen Anregungen. Habe
inzwischen die Seite waveswebdesign.de auf Responsiv
umgestellt.

Da merke ich aber nichts davon.[*]
Wenn ich mein Fenster verkleinere, schieben sich zumindest die
Bilder oben noch links aus dem Viewport raus. Ansonsten ändert
sich auch am Layout nichts, der Browser positioniert die
Elemente lediglich neu. Änderungen bei schmalem Viewport von
200px z.B. ändern die Inhalte nicht, das Menü ist immer noch
horizontal, Scrollbalken sind überall.

Das wundert mich jetzt nicht unbedingt, schrieb doch schon der erste Kommentator auf besagter Seite:
Really very nice and easy tutorial for basic understanding […]

Wobei Tutorial fast schon etwas hoch gegriffen ist.

Gruß

osmodius