Internet-Software, Browser, FTP, SSH 4.651 Themen, 38.261 Beiträge

Verfolgung starten Optionen

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
Hallo Gemeinde, Das Problem mit der responsive Kodierung von ... Sigi Saudi
Servus Sigi Saudi, ich hab da noch ein Tool womit du deine ... Wiesner
Hallo Mr. Wiesner, Ich hatte gestern schon geantwortet, finde die ... Sigi Saudi
Ich weiß es nicht ob es für dich nötig ist, je genauer du deine ... Wiesner
Hallo Mike, Es waere schon von Bedeutung, bei Goggle weiter im ... Sigi Saudi
Hallo Mike, Es waere schon von Bedeutung, im Google Ranking nach ... Sigi Saudi
Ich weiß nicht was du so an Möglichkeiten hast, Bilder zu ... Wiesner
Sigi Saudi Wiesner „Ich weiß nicht was du so an Möglichkeiten hast, Bilder zu ...“
Optionen

Hallo Mike,
Hat etwas laenger gedauert mit meiner Antwort, weil ich erst einmal eine Internetseite Mobil Friendy haben wollte (frei nach Google). Das ist mir jetzt auch geglueckt und ich habe mir dafuer ein Template gemacht.
Fotooptimirung mit Adobe Photoshop kann und habe ich gemacht und in Source Safe hab ich mich mittlerweile auch eingearbeitet. Vielen Dank fuer Deine Hinweise.
Fuer das leidige Thema Responsive Web bin ich meinen eigenen Weg gegangen. Ich hatte ja zuerst versucht, die Dimensionen der div und der images und was da so alles dran haengt mit Media Strings zu codieren. Aber davon bin ich wieder ganz abgekommen, weil Freund Apple diese Art der Differenzierung zwischen WEB Mobile Viewports nur bedingt unterstuetzt. Z. B. wird Device Pixel Ratio nicht unterstuetzt. Es ist wie immer: Apple will alles anders machen als andere und verliert damit die Kompatibilitaet mit den Internet Standards aus den Augen. (Ich verstehe nicht den Enthusiasmus der Apple Gemeinde fuer diese technischen Kruecken. Die Liste der Inkompatibilitaeten, wenn man sie dann auflisten wuerde, ist sehr lang. Ich habe mich schon reichlich damit rumgeaergert).
Um die Media Strings zu umgehen und trotzdem eine zu mobilen Geraeten responsive codierung zu erhalten, bediene ich mich der guten, alten JavaScript. Ich frage erst einmal die Displaydimensionen ab und darauf basierend setze ich dann mit document.get.ElementBy ... die Parameter so, dass sie fuer das betreffende Mobiledisplay passen. Um nicht fuer jedes Display die Dimensionen neu berechnen zu muessen, lege ich in meinem speziellen Falle nur die Bildbreite passend zur Portraitschirmbreite des Mobiltelefons fest und berechne mit JavaScript alle anderen erforderlichen Dimensionen, basierend auf der Bildbreite. Das funktoniert gut und erspart viel Arbeit, die bei Verwendung von Media Strings anfallen wuerde, weil CSS eine Berechnung von Parametern nicht hergibt. Mit Ueberpruefung mit dem Mobile-Emulator in Google Chrome habe ich so meine Seite fuer die gaengigsten Mobilbildschirme optimiert.
Auch erstelle ich alle Formate nur fuer Portrait. Dreht der Anwender sein Telefon nach Landscape, kann er das Bild durch "pinch or stretch" (Spreizen zweier Finger) auf das Bildschirmformat vergroessern, das kennt jeder Touchscreen Benutzer. Wenn Landscape extra codiert wuerde, muesste beim Wechsel von Portrait nach Landscape und zurueck jedes mal ein Refresh gemacht werden, was nur die wenigsten wissen.
Abschliessend noch meine Erfahrung mit der Angabe der Dimensionen in Prozent: Davon bin ich wieder voellig abgekommen aus folgendem Grund. Die Prozentdimensionen beziehen sich nach meiner Erfahrung mit den IE Trident7, dem Firefox 38.01 und Google Chrome 43 auf die noch verfuegbare Schirmgroesse. Wenn einer im IE z. B. die Menue Bar anzeigt und ein anderer das nicht macht, passen die Prozentangaben in einem Fall nicht mehr. Auch passen die Prozentwerte niemals fuer alle 3, den IE, den Firefox und den Chrome, usw, weil die jeweils unterschiedliche aktive Bildschirmgroessen haben, die der Ersteller der Internetseite nicht kennen kann. weil die auf jedem PC, Laptop, usw, der die Seite anzeigen soll, individuell gesetzt werden koennen.
Meine 'Mobile friendly' (Google Speedtest Originalton aus 100 / 100 Nutzererfahrung: ✓ Glückwunsch! Es wurden keine Probleme gefunden.) Seite hat die Adresse
http://www.moon-and-sun.com/anlage/gallery-js?pasa=de

Viele Gruesse aus dem sehr warmen Thailand
(Am 29.5. fliege ich fuer 3 Monate nach Deutschland)
Siegfried

Gruesse aus Wang Nam Kiaw / Thailand
bei Antwort benachrichtigen