Darstellung FTUI auf Tablet und Smartfon unterschiedlich groß

Ronny_5578 · 20 Juni 2018, 22:10:32

Moin, moin,
ich bin am verzweifeln.
Ich habe das "TabletUI Live-Demo - waschto.eu" genommen und für meine Zwecke angepasst.
Auf meinem Nexus 7 funktioniert es auch prima und sieht hübsch aus.

Nun wollte ich es mit meinem Galaxy S7 anschauen und da passt es nicht von der Größe etc...
Da ist alles viel zu groß!
Die Screenschots habe ich mal rangehängt.

Ich habe bereits mit viewport und breite/höhe gespielt, aber entweder passt es am Telefon, dann ist es auf dem Tablet sehr klein, oder umgekehrt.

Hat jemand eine Idee?

Hier mal der Quellcode von index.html:

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=2, maximum-scale=2, user-scalable=no" />


      <meta name="widget_base_width" content="83">
    <meta name="widget_base_height" content="25">




	
    <meta name="longpoll" content="1">

    <script src="js/fhem-tablet-ui.js" defer></script>

    <meta name='toast' content='0'>
    <meta name="gridster_disable" content="1">

    <link rel="stylesheet" href="/fhem/tablet/css/fhem-tablet-ui.css" />
    <link rel="stylesheet" href="/fhem/tablet/lib/font-awesome.min.css" />
    <link rel="stylesheet" href="/fhem/tablet/lib/openautomation.css" />
    <link rel="stylesheet" href="/fhem/tablet/lib/fhemSVG.css" />


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

</head>

<body>
    <div class="gridster">
        <ul>
            <li data-row="1" data-col="1" data-sizex="1" data-sizey="19">
                <header>
                    <div data-type="label" class="medium orange">Menu</header>
                <div class="cell">
                    <div data-type="pagebutton" data-url="#1_index.html" data-load="#1_index" data-active-pattern=".*#1_index.html" data-icon="fa-home"
                        data-on-background-color="#aa6900"></div>
                    <div data-type="pagebutton" data-url="#1_wohnzimmer.html" data-load="#1_wohnzimmer" data-active-pattern=".*#1_wohnzimmer.html"
                    data-on-background-color="#aa6900" data-icon="oa-scene_livingroom"></div>
                    <div data-on-background-color="#aa6900" data-type="pagebutton" data-url="#1_kueche.html" data-load="#1_kueche" data-active-pattern=".*#1_kueche.html" data-icon="fa-cutlery"></div>
                    <div data-on-background-color="#aa6900" data-type="pagebutton" data-url="#1_schlafzimmer.html" data-load="#1_schlafzimmer" data-active-pattern=".*#1_schlafzimmer.html"
                        data-icon="fa-hotel"></div>
                    <div data-on-background-color="#aa6900" data-type="pagebutton" data-url="#1_alles.html" data-load="#1_alles" data-active-pattern=".*#1_alles.html"
                        data-icon="oa-status_comfort"></div>

                </div>
            </li>
            <li data-row="1" data-col="2" data-sizex="14" data-sizey="19">
                <div class="page" id="1_index"></div>
                <div class="page" id="1_wohnzimmer"></div>
                <div class="page" id="1_kueche"></div>
                <div class="page" id="1_schlafzimmer"></div>
				<div class="page" id="1_alles"></div>
                <div class="page" id="1_system"></div>
            </li>

        </ul>

        </div>
</body>

</html>

moonsorrox · 21 Juni 2018, 12:38:47

ich denke da es ein "starres" Design ist funktioniert das nicht.
Grundlegendes dazu wäre...
Entweder du machst dir mit deinem FTUI ein passendes für jedes Gerät und ruft jeweils auf dem entsprechenden Gerät die index.html und index_mobil.html auf oder du arbeitest mit einem Flex Layout welches sich dann anpaßt, beides geht natürlich.
zu dem Flex Layout mal hier schauen.

Zu der anderen Variante gibt es schon jede Menge im Forum, da suche mal nach.

Ronny_5578 · 21 Juni 2018, 22:29:56

Vielen Dank,
ich werde es mal ausprobieren.

FHEM Forum

Darstellung FTUI auf Tablet und Smartfon unterschiedlich groß

Ronny_5578

moonsorrox

Ronny_5578