|
|||
Flexbox auf Android Mobil funktioniert nicht
Hallo zusammen,
ich habe ein Formular, welches ich komplett über Flex designe. Auf allen Browsern, bis auf Safari 5.1.7 und Android Mobile Browsern funktioniert alles super. Kann mir jemand sagen, was ich vergessen habe, damit es im Safari oder zumindest auch auf den Android Browsern sauber angezeigt wird? Hier mal der Code (damit es einfach ist, CSS im HTML-Code): HTML-Code:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Flex-Test</title> <style type="text/css"> #content{ display: -webkit-flex; -webkit-justify-content: space-around; display:flex; justify-content: space-around; width:100%; } .frmkontaktinput{ margin:0px; padding:2px; border: solid 1px #003F69; } .frmueberschrift{ width:100%; border: none; text-align: left; font-size: 1.2em; font-weight: bold;} #frmkontakt{ display: -webkit-flex; -webkit-flex-wrap: wrap; -webkit-justify-content: space-between; -webkit-align-content:space-between; display:flex; flex-wrap: wrap; justify-content: space-between; align-content:space-between; width: 300px; height:380px; padding:10px; border: solid 1px #000; box-shadow: 2px 2px 2px 2px #aaa; } #frmkontakt label {border:none;} #firstname, #lastname, #email1, #email2, #strasse, #phone{width:100%;} #plz{width:20%;} #ort{width:75%;} #lblgewerbeeinheiten {width:50%;} #anzahleinheiten, #baujahr, #alter{width:30%;} #anfrageabsenden{width:100%;height:30px;} #lblgewerbeeinheitenJa, #lblgewerbeeinheitenNein{width:10%} input[type='radio']{margin-top:3px;width:10%;} #verwalterwechsel{width:40%;} </style> </head> <body> <div id="content"> <form id="frmkontakt" name="frmkontakt" method="post" action="" > <label id="lblpersonaldata" class="frmueberschrift">Persönliche Angaben</label> <select id="cmbanrede" class="frmkontaktinput" name="cmbanrede"> <option value="Herr" selected >Herr</option> <option value="Frau">Frau</option> </select> <label id="lblanredezusatz" class="frmkontaktinput">zusätzliche Anrede</label> <select id="cmbanredezusatz" class="frmkontaktinput" name="cmbanredezusatz"> <option value="" selected ></option> <option value="Dr.">Dr.</option> <option value="Professor">Professor</option> <option value="Professor Dr.">Professor Dr.</option> </select> <input type="text" name="firstname" id= "firstname" class="frmkontaktinput" placeholder="Vorname" value="" required /> <input type="text" name="lastname" id= "lastname" class="frmkontaktinput" placeholder="Nachname" value="" required /> <input type="email" name="email1" id= "email1" class="frmkontaktinput" placeholder="Email" value="" required /> <input type="email" name="email2" id= "email2" class="frmkontaktinput" placeholder="Email wiederholen" value="" required /> <input type="tel" name="phone" id= "phone" class="frmkontaktinput" placeholder="Telefon / Mobil" value="" /> <label id="lblobjektdata" class="frmueberschrift">Angaben zum Objekt</label> <input type="text" name="plz" id= "plz" class="frmkontaktinput" placeholder="PLZ" value="" required /> <input type="text" name="ort" id= "ort" class="frmkontaktinput" placeholder="Ort" value="" /> <input type="text" name="strasse" id= "strasse" class="frmkontaktinput" placeholder="Straße" value="" /> <label id="lblgewerbeeinheiten" class="frmkontaktinput">Gewerbeeinheiten</label> <label id="lblgewerbeeinheitenJa" class="frmkontaktinput">Ja</label> <input type="radio" name="gewerbeeinheiten" id= "gewerbeeinheiten" class="frmkontaktinput" value="Ja" /> <label id="lblgewerbeeinheitenNein" class="frmkontaktinput">Nein</label> <input type="radio" name="gewerbeeinheiten" id= "gewerbeeinheiten" class="frmkontaktinput" value="Nein" checked /> <input type="text" name="anzahleinheiten" id= "anzahleinheiten" class="frmkontaktinput" placeholder="Einheiten" value="" required /> <input type="text" name="baujahr" id= "baujahr" class="frmkontaktinput" placeholder="Baujahr" value="" required /> <input type="text" name="alter" id= "alter" class="frmkontaktinput" placeholder="Alter" value="" /> <label id="lblwegverwaltung" class="frmkontaktinput">WEG Verwaltung</label> <input type="radio" name="verwaltungsart" id= "verwaltungsart" class="frmkontaktinput" value="WEG" /> <label id="lblmietverwaltung" class="frmkontaktinput">Mietverwaltung</label> <input type="radio" name="verwaltungsart" id= "verwaltungsart" class="frmkontaktinput" value="Miet" checked /> <label id="lblmoeglicherwechsel" class="frmkontaktinput">Verwalterwechsel zum</label> <input type="date" name="verwalterwechsel" id= "verwalterwechsel" class="frmkontaktinput" placeholder="Wechsel zum" value="" required /> <button id="anfrageabsenden" type="submit" class="frmkontaktinput">Anfrage absenden</button> </form> </div> </body> </html> Flextest Ich danke euch, für eure Hilfe Viele Grüße Heimi |
Sponsored Links |
|
|||
Hallo
Zitat:
Ähnliches vermute ich für den von dir verwendeten Android-Browser. Um welche Version handelt es sich denn bei deinen Tests? Wenn du die beide mit Flexbox unterstützen willst musst du kein Prefix, sondern eine der beiden älteren Versionen von Flexbox verwenden, die aber noch nicht alle Funktionen des aktuelles Flexbox unterstützen. Mein Rat: Lass es bleiben. Als einzigen älteren, noch halbwegs relevanter Browser, lohnt es sich den IE 10 mit Prefixen zu unterstützen. Für alle anderen älteren Browser lohnt sich höchstens ein einfaches Fallback. Gruss MrMurphy Geändert von MrMurphy (24.05.2016 um 08:33 Uhr) |
Sponsored Links |
|
|||
Ein Hinweis noch, was vieeel wichtiger ist, als, dass flexbox auch auf solch veralteten Browsern nicht funktioniert: Verwende Label so, wie sie vorgesehen sind. Also so, dass sie auch eine Zuordnung zum korrekten HTML input liefern.
placeholder ist kein Ersatz für ein label! |
|
|||
Hi,
da muss ich doch mal ne doofe Frage stellen: Warum sind die Labels technisch so wichtig? Sehe doch immer wieder irgendwelche Onlineanwendungen, in denen nur noch der Placeholder steht. Das spart doch Platz?! Bezüglich des Browsers: Hier ist mir in erster Linie der Android Browser wichtig. Bei meiner Freund ( Galaxy S3 3,5 Jahre alt) wird die Flex so gar nicht angewendet. Der Safari ist mir egal... Hatte den nur noch installiert.... Den werde ich dann mal runterwerfen... ...spart ja auch Platz LG Heimi |
|
|||
Labels sind wichtig, weil man dann auch nach dem Ausfüllen noch sieht, was man wo eingetragen hat. Und auch, damit man weiß, welches Feld für welchen Wert steht. Es dienst also in erster Linie der Zugänglichkeit und Benutzerfreundlichkeit der Webseite.
Ja, viele Leute machen das nicht, aber das heißt nicht, dass dies dann richtig ist. Bezüglich Platzsparen: Musst du für die einzelnen Pixel deiner Website etwas zahlen? Du könntest auch noch mehr Platz sparen wenn du alle Abstände auf 0 setzt und die Schriftgröße auf 2px... Platzsparen ist im Internet zum Glück nicht nötig Bezüglich androidbrowser: auf caniuse.com kannst du die Unterstützung für flexbox nachsehen und dann schauen, was dein Freund verwendet. Bezüglich android-browser: Der wird mittlerweile nicht mehr weiterentwickelt, da sollte lieber Chrome (Firefox/Opera/...) als Standardbrowser verwendet werden. Den android-browser muss man also nicht (mehr) wirklich unterstützen. |
|
|||
Chrome ist standardmäßig installiert. Aber wenn du den browser unbedingt unterstützen willst musst du ohne (bzw. mit wenigen, ausgewählten) html5-technologien arbeiten.
Android and the eternal dying mobile browser | Breaking the Mobile Web Android Browser Security Hole Affects Millions of Users, Says Expert | NDTV Gadgets360.com |
|
|||
Das ist doch schei....
Android-Handys sind verbreitet wie nix anderes und man muss auf neueste Technnologie verzichten, weils nicht unterstützt wird... Dann werde ich mich wohl mit alten Techniken quälen, damit die große Zahl der Android-Mobile-Besitzern auch was anständiges angezeigt bekommen. Hat jemand ein gutes tutorial für Form-Design? Viele Grüße Heimi |
|
|||||
Hallo
Zitat:
Zitat:
Auch die alten Android Browser vom Galaxy S3 sind mit 0% Global und 0% in Deutschland unbeachtlich. Du unterliegst leider dem Phänomen zu glauben, das Browser, die du oder Bekannte von dir verwenden, auch von Anderen benutzt werden. Dem ist aber nicht so. Zitat:
Zitat:
Zitat:
Der erste Schritt zu einem guten Design ist immer ein gut strukturierter HTML-Quelltext. Das es da bei dir noch Mängel gibt hat cloned ja bereits geschrieben. Gruss MrMurphy |
Sponsored Links |
|
|||
Vielen Dank für euer Feedback...
Ich bin nur etwas verwirrt.... Kennen niemanden, der sein Handy mit nem anderen Browser aufpimpt. Die Handys werden gestartet und das Browsersymbol einfach geklickt... Vielleicht liegts dann doch am S3?????? Eine weitere doofe Frage hätte ich dann doch noch: Wie realisiere ich ein Fallback? Über Javascript? Oder geht das auch in CSS? Viele Grüße Heimi |
Sponsored Links |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Flexbox Zeilenumrbuch auf Android-Smartphone funktioniert nicht | Uwe_B | CSS | 4 | 04.01.2016 18:00 |
XML-Datei unter Android anzeigen und bearbeiten? | XML144 | (X)HTML | 0 | 08.09.2015 19:39 |
Mobil Flexbox Fehler welche Alternative | gabischatz | Offtopic | 4 | 03.07.2014 08:30 |
Mouseover funktioniert nicht (externe Methode) | blackhtml | CSS | 2 | 07.04.2009 18:49 |
dtd und css in php funktioniert im IE nicht!!! | da-lick | CSS | 17 | 09.06.2007 16:44 |