Internet-Software, Browser, FTP, SSH 4.656 Themen, 38.296 Beiträge

Responsive WEB Page

Sigi Saudi / 8 Antworten / Flachansicht Nickles

Hallo Gemeinde,
Ich habe wieder einmal Fragen.
Meine WEB Seiten werden dem Trend folgend zunehmend von Mobilgeraeten aufgerufen, Sartphones, Tablets, etc. Der Anteil liegt z. Z. (Zaehlung ueber den userAgent String seit 2011) bei etwas mehr als 20 %. Dem trage ich dadurch Rechnung, dass ich mich in die responsiv Seitenerstellung eingearbeitet habe. Ich gebe Hauptdimensionen in % an und den font-size in der Einheit 'vh'. Das klappt auch ganz gut, nur, wenn ich die Seite dann mit meinem Samsung Grand 2 SM-G7102 mit dem Chrome Explorer lade, sieht alles gut aus. Nur, wenn ich das Smartphone z. B. von Portrait auf Landscape drehe, bleibt das Portrait Format in Landscape erhalten. Das Format wird nicht rekalkuliert. Woran das liegt, weiss ich natuerlich. Die Seite wird beim Drehen des Geraets nicht neu geladen. Deshalb wird das responsiv Format fuer die neue Displaygroesse nicht neu berechnet. Wenn ich das Geraet drehe und einen Refresh mache, ist natuerlich alles in Ordnung, weil der Refresh ja die Seite neu laedt und neu berechnet. Aber das weiss natuerlich ein zufaelliger Client z.B. in Kenia nicht.
Die Adresse einer solchen Seite ist z. B. http://www.moon-and-sun.com/phubon.php?pasa=de

Ich kenne und benutze natuerlich auch die CSS Moeglichkeiten fuer die Zuweisung anderer CSS Parameter im Falle von Smartphones zu div/class, etc, Definitionen wie z. B. "@media only screen and (min-resolution: 117dpi) and (max-resolution: 119dpi)..." und das funktioniert auch, aber nur bei einem Refresh wird die Seite neu berechnet wenn das Format von Landscape zu Portrait oder umgekehrt gewechselt hat.

Andererseits habe ich einige WEB Seiten programmiert mit starren Parametern in Pixeln.
Beispiel: http://www.moon-and-sun.com/booking/Specbook.php?pasa=de 

Wenn ich solche Seiten lade, werden sie auf das Smartphone Displayformat umgerechnet und automatisch neu berechnet, wenn ich Portrait >> Landscape >> Portrait wechsle.

Meine Fragen nun:
1.) Warum werden einige Seiten auf das Smartphone Format umgerechnet, andere nicht. Ich hatte die phubon Seite zuerst in Pixeln programmiert und als das Ergebnis sich auf dem Smartphone als mehr als maessig herausstellte, begann ich mit der % resp. vh Programmierung und dem @ im CSS.
2.) Gibt es in javascript, jQuery oder Ajax & Co. eine Moeglichkeit, die Umrechnung der Dimensionen der Elemente vor der Anzeige im Smartphone  zu forcieren? 
MfG
Sigi Saudi

Gruesse aus Wang Nam Kiaw / Thailand
bei Antwort benachrichtigen
Sigi Saudi Nachtrag zu: „Responsive WEB Page“
Optionen

Hallo Gemeinde,
Das Problem mit der responsive Kodierung von Internetseiten hat mir keine Ruhe gelassen und heute, am thailaendischen Neujahrstag 2557/2558 habe ich eine Loesung gefunden.
Erstmal vorweg, ich habe in der Literatur keine Moeglichkei gefunden, beim Wechsel von Landscape auf Portrait oder umgekehrt ein refresh der Seite zu forcieren. Also bin ich den entgegengesetzten Weg gegangen.
Ich habe die Slideshow mit festen Parametern progrsammiert, die auf gaengige Smartphones passen. Im Original ist z. B. mein Samsung Galaxy Grand 2 Duo SM-G7102 im Landscape Modus mit der Slideshow fast voll ausgefuellt. Drehe ich das Geraet auf Portrait, rekalkuliert der Smartphone Browser die Slideshow automatisch so, dass sie in der Breite komplett in Portrait hineinpasst, keine Verzerrungen also. Das gilt auch fuer den Fall, wenn ich von Portrait auf Landscape drehe. Kein Refresh, keine Verzerrungen, jeweils eine saubere Darstellung.
Fuer einen Laptop oder PC ist das Abbild der Slideshow aber zu klein. Ich wollte da das Bildformat 640/360 (16x9) haben. Also musste ich jetzt mit CSS @media only screen einen Weg finden, um PC/Laptop Abrufe der Internetseite zu erkennen.
Ich waehlte mit "@media only screen and (min-width : 1224px){ }" einen recht kleinen Wert fuer die minimale horizontale Aufloesung mit dem Ziel, moeglichst viele PC/Laptop Geraete zu erfassen. einen oberen Wert fuer min-width definierte ich nicht, um mich nicht wieder zu begrenzen. Ich habe dann unter @media die vergroesserten Dimensionen fuer die Darstellung der Slideshow eingegeben. Damit habe ich nun erreicht, dass auf dem Smartphone eine Internetseite angezeigt wird, die auf das Smatphone passt mit einer Bildgroesse von 500x281 Pixeln und auch automatisch dimensionsgerechte Landscape > Portrait > Landscape Wechsel macht. Auf Laptops erhalte ich dann automatisch das groessere Format 640x360. Da Laptops i. a. nicht fuer Wechsel Landscape > Portrait > Landscape ausgelegt sind, ist keine zusaetzliche Kodierung einer Portrait-Seite erforderlich, die dann auch wieder beim Wechsel einen Refresh brauchen wuerde.
Uebrigens, Tablets, iPads & Co zeigen das kleine Smartphoneformat an, was aber kein Problem ist, weil man die Bildgroesse bei diesen Geraeten mit Touchscreen durch Auseinanderziehen des Daumens und des Zeigefingers auf Schirmgroesse bringen kann, was jeder Anwender weiss.
Nach meiner Erfahrung ist eine responsive Kodierung von Internetseiten fuer Smartphones problematisch und nicht empfehlenswert, weil Landscape und Portrait unterschiedliche Groessen der %-Werte fuer die Dimensionierung benoetigen, was im Falle der Lageaenderung des Smartphones einen Refresh erforderlich macht, wenn man die Seite schirmkonform anzeigen will. Das weiss natuerlich ein zufaelliger Customer irgendwo in der Welt nicht, der die Seite abruft. Deshalb ist das Verfahren nur dann gut, wenn jemand ausschliesslich fuer sich selbst Internetseiten kodiert, was aber nur ganz selten zutrifft.
Der Link zu der Slideshow ist: http://www.moon-and-sun.com/phubon.php?pasa=de

Dieser Bericht beschreibt, was ich herausgefunden habe. Sollte jemand andere Erkenntnisse haben, wuerde ich mich ueber eine Antwort freuen.
MfG
Sigi Saudi 

Gruesse aus Wang Nam Kiaw / Thailand
bei Antwort benachrichtigen