Auflösung/Darstellung an Anzeige anpassen (schwarzer Rand)

Begonnen von harald654, 25 November 2016, 19:37:46

Vorheriges Thema - Nächstes Thema
Drucken
Nach unten Seiten1
Benutzer-Aktionen

harald654

25 November 2016, 19:37:46
Hallo,

Ich bin mittlerweile mit der Gestaltung meiner Oberfläche soweit fertig :)
Nur passt die Darstellung nicht so recht mit meinem Anzeigegerät(en) zusammen.
Die Oberfläche will ich auf zwei Geräte darstellen:
1. 8Zoll - 1.280x800 - 16:10 - Android
2. 10Zoll - 1920×1080 - 16:9 - Windows

Im Header der Index.html hab ich noch nichts verändert. Felder habe ich 7 in der Höhe und 11 in der Breite. Auf dem 1.Gerät zeigt es mir unten und rechts einen schwarzen Rand an, auf dem 2.Gerät ebenfalls unten einen schwarzen Rand und an der Seite (logischerweise) einen noch größeren schwarzen Rad (siehe Bilder).
Wenn ich die Felder um jeweils 1 erhöhe (B:8 H:12), Schneidet es mir auf dem 1.Gerät sowohl unten als auch rechts ein teil des Feldes ab. Auf dem zweiten Grät schneidet es mir unten ein Teil des Feldes ab und rechts ist noch immer ein schwarzer Rad.

Wegen den unterschiedlichen Seitenverhältnissen (16:10 zu 16:09) wird es wahrscheinlich nicht möglich sein die Oberfläche auf beiden Geräten Displayfüllen darzustellen?
Daher würde ich es gerne so umsetzen, das die Oberfächer auf dem 1.Gerät (16:10) korrekt (sprich Displayfüllen) angezeigt wird und auf dem 2. Gerät (16:9) rechts ein schwarzes Rad entsteht (wegen den unterschiedlichen Seitenverhältnissen der Geräte) aber die Höhe ebenfalls Displayfüllend ist.
Ist das möglich?

Meine Index.html :
Code Auswählen
<!DOCTYPE html>
<html>
<head>
    <!--
     /* FHEM tablet ui */
     /*
     * UI builder framework for FHEM
     *
     * Version: 2.2.*
     * URL: https://github.com/knowthelist/fhem-tablet-ui
     *
     * Copyright (c) 2015-2016 Mario Stephan <mstephan@shared-files.de>
     * Under MIT License (http://www.opensource.org/licenses/mit-license.php)
     *
     * - create a new folder named 'tablet' in /<fhem-path>/www
     * - copy all files incl. sub folders into /<fhem-path>/www/tablet
     * - add 'define TABLETUI HTTPSRV ftui ./www/tablet Tablet' in fhem.cfg
     * - Tadaaa! A new fhem ui in http://<fhem-url>:8083/fhem/tablet/
     */
    -->
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
    <meta name="widget_base_width" content="74">
    <meta name="widget_base_height" content="71">
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="gridster_disable" content="1">
    <meta name="longpoll" content="1"> <!-- 1=longpoll;0=shortpoll every 30sec -->
    <meta name="debug" content="0"> <!-- verbose level 1-6 = output to console;0 = not output -->

    <link rel="stylesheet" href="lib/jquery.gridster.min.css" />
    <link rel="stylesheet" href="css/fhem-tablet-ui.css" />
    <link rel="stylesheet" href="lib/font-awesome.min.css" />
    <link rel="stylesheet" href="lib/jquery.toast.min.css" />

<link rel="stylesheet" href="/fhem/tablet/lib/openautomation.css" />
    <link rel="stylesheet" href="/fhem/tablet/lib/fhemSVG.css" />
<link rel="stylesheet" href="/fhem/tablet/lib/jquery.toast.min.css" />
<link rel="stylesheet" href="/fhem/tablet/css/fhem-tablet-ui-user.css" />

    <!-- define your personal style here, it wont be overwritten  -->
    <!-- link rel="stylesheet" href="css/fhem-green-ui.css" / -->
    <!-- link rel="stylesheet" href="css/fhem-tablet-ui-user.css" / -->

    <script src="../pgm2/jquery.min.js"></script>
    <script src="lib/jquery.toast.min.js"></script>
    <script src="lib/jquery.gridster.min.js"></script>
    <script src="js/fhem-tablet-ui.js" defer></script>

    <title>FHEM-Tablet-UI</title>
</head>
<body>
<div class="gridster">
<ul>
            <li data-row="1" data-col="1" data-sizex="1" data-sizey="8" data-template="menu.html"></li>
        </ul>
    </div>
</body>
</html>

Gruß,
H.

harald654

#1
28 November 2016, 19:11:09
Niemand da der Anzeigegeräte mit unterschiedlichen Auflösungen verwendet? :)
Ich könnte natürlich auch für jedes Tablet eine eigene Anzeige machen, aber dann müsste ich bei Änderungen immer die Sachen doppelt  (bzw. mit noch einer Anzeige für das Handy dreifach) anpassen, das geht doch bestimmt auch einfacher?

Gruß,
H.

redlav

#2
28 November 2016, 20:57:56
Hallo,

ich habe das bei mir durch unterschiedliche Scaleangaben im "viewport" gelöst:
<meta name="viewport" content="width=device-width, initial-scale=1.28, maximum-scale=1.28, user-scalable=no" />
Da musst du ein wenig ausprobieren und auch die "widget_base_width" und "widget_base_height" ggf. noch mal anpassen um die optimale Größe
herauszubekommen.
Ich nutze PHP und frage den Rechnernamen ab um die jeweiligen Größen zu setzen. Habe also nur eine index.php (habe ich von nesges abgekupfert 8))
Du müsstest ohne php nur deine Index.html doppeln. Die restlichen Seiten bleiben gleich, wobei die Inhalte natürlich in das gesetzte Raster passen müssen.

Für das Handy habe ich aber eine eigene Seite auf Basis mobilen Beispielseite gemacht, da ich auf dem Handy andere Informationen/Funktionen haben möchte,
als auf der Gesamtübersicht.

Gruß Norbert
Drucken
Nach oben Seiten1
Benutzer-Aktionen