Flexbox Desgin: Safari (iPhone6)

BooStar · 13 Januar 2018, 12:01:57

Hallo zusammen,

ich spiele jetzt seit ca. 3 Tage mit dem FTUI-Frontend um mir ein responsiv UI zu bauen,
leider verstehe ich da eine Kleinigkeit nicht und hoffe ihr könnt Licht ins Dunkle bringen.

Also folgender Code:

Code Auswählen

<!DOCTYPE html>
<html>

<head>
    <link rel="icon" href="favicon.ico" type="image/x-icon" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0 user-scalable=no" />
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="longpoll" content="1"> <!-- 1=longpoll;0=shortpoll every 30sec -->
    <meta name="debug" content="1"> <!-- 1=output to console;0=no output -->
 
    <script src="js/fhem-tablet-ui.js" defer></script>

    <title>FHEM-Tablet-UI</title>
   
</head>

<body>
<div class="flex">
    <div class="vbox bg-red">
    <div class="hbox bg-ligthblue">
        <div class="card ">
            <header>MySensors</header>
             <div class="" data-type="readingsgroup" data-device="MyTHYReadings"></div> 
        </div>
        <div class="card ">
            <header>MySensors</header>
            <div class="" data-type="readingsgroup" data-device="MyTHYReadings"></div> 
        </div>
    </div>
    </div>
</div> 
</body>
</html>

Im Browser auf dem Desktop funktioniert das Design wie es soll und ordnet die beiden Boxen untereinander an, wenn das Fenster zu klein wird.
Leider schint mein iPhone genau dazwischen zu liegen, denn da werden die Boxen nicht untereinander angeordndert...

Hat jemand eine Idee dazu?

Gruß
Boostar

BooStar · 15 Januar 2018, 10:20:05

Hello again....

Im Wiki habe ich natürlich folgendes gefunden:

ZitatÄndert sich die Bildschirmgröße, ändert sich auch die Größe der horizontalen Boxen bzw. der Kacheln. Sinkt die Displaygröße unter einen bestimmten Wert, werden die Kacheln automatisch untereinander angeordnet.

Weiß jemand wo dieser "bestimmte Wert" definiert ist? Ich vermute hier liegt mein Problem...

Gruß
BooStar

FHEM Forum

Flexbox Desgin: Safari (iPhone6)

BooStar

BooStar