zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Flexbox auf Android Mobil funktioniert nicht

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 24.05.2016, 01:34
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 24.05.2016
Ort: Walluf
Beiträge: 5
Heimi befindet sich auf einem aufstrebenden Ast
Standard 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>
Hier noch der Link zu meiner Testpage:

Flextest

Ich danke euch, für eure Hilfe

Viele Grüße

Heimi
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 24.05.2016, 02:06
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 10.01.2010
Beiträge: 1.123
MrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer Mensch
Standard

Hallo

Zitat:
Safari 5.1.7
Der hat in Deutschland laut Can I Use eine Verbreitung von 0% und weltweit von 0%. Ist es dein Ernst das du den noch unterstützen willst?

Ä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)
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 24.05.2016, 09:16
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.247
cloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblick
Standard

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!
Mit Zitat antworten
  #4 (permalink)  
Alt 24.05.2016, 15:13
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 24.05.2016
Ort: Walluf
Beiträge: 5
Heimi befindet sich auf einem aufstrebenden Ast
Standard

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
Mit Zitat antworten
  #5 (permalink)  
Alt 24.05.2016, 15:27
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.247
cloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblick
Standard

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.
Mit Zitat antworten
  #6 (permalink)  
Alt 24.05.2016, 15:42
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 24.05.2016
Ort: Walluf
Beiträge: 5
Heimi befindet sich auf einem aufstrebenden Ast
Standard

Naja...
Ich glaube kaum, dass sich die Android-Mobil Nutzer nach dem Kauf erstmal einen extra Browser installieren?
Mit Zitat antworten
  #7 (permalink)  
Alt 24.05.2016, 15:48
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.247
cloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblick
Standard

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
Mit Zitat antworten
  #8 (permalink)  
Alt 24.05.2016, 23:14
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 24.05.2016
Ort: Walluf
Beiträge: 5
Heimi befindet sich auf einem aufstrebenden Ast
Standard

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
Mit Zitat antworten
  #9 (permalink)  
Alt 25.05.2016, 00:02
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 10.01.2010
Beiträge: 1.123
MrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer Mensch
Standard

Hallo

Zitat:
Das ist doch schei....
Nein. Die Steine legst du dir selbst in den Weg.

Zitat:
Android-Handys sind verbreitet wie nix anderes
Aber nicht mit den von dir genannten Browsern.

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:
Ich glaube kaum, dass sich die Android-Mobil Nutzer nach dem Kauf erstmal einen extra Browser installieren?
Doch, bei den alten Android-Geräten werden sehr häufig Firefox oder Chrome verwendet, die mit Flexbox und anderen CSS3-Techniken keine Probleme haben. Und wie cloned geschrieben hat ist Chrome bei vielen Android-Geräte bereits standardmäßig installiert.

Zitat:
Dann werde ich mich wohl mit alten Techniken quälen
Das wäre schlecht und ist nicht notwendig. Wie schon geschrieben kannst du ganz normal Flexbox verwenden und erstellt ein einfaches Fallback.

Zitat:
Hat jemand ein gutes tutorial für Form-Design?
Es gibt leider keine guten kostenlosen Anleitungen. Empfehlenswert sind die Bücher oder Videotrainings von Peter Müller wie "Flexible Boxes".

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
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 25.05.2016, 00:11
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 24.05.2016
Ort: Walluf
Beiträge: 5
Heimi befindet sich auf einem aufstrebenden Ast
Standard

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
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ä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


Alle Zeitangaben in WEZ +2. Es ist jetzt 12:16 Uhr.