Hallo Com,
ich habe angefangen mir ein FTUI zu basteln, das ganze natürlich auf dem PC. Im dortigen Browser sieht das alles in Ordnung aus. Jetzt wollte ich mir das mal auf dem Tablet anschauen. Die Grids scheinen zu passen, nur der Inhalt nicht, viel zu groß und nicht an seinem Platz.
Wie kann ich sowas vermeiden,oder muss ich wo was einstellen, damit er das an die Größe des Tablets anpasst ?
Oder geht das nur durch herum testen, die Widgets verkleinern und wieder am Tablet schauen, wie es aussieht ?
Grüße,
Hallo,
viewport wäre eine Möglichkeit wenn deine Bildschirmauflösung das gleiche Verhältnis in Breite und Höhe hat.
<meta name="viewport" content="width=device-width, initial-scale=0.8, maximum-scale=0.8, user-scalable=no">
Im Beispiel habe ich es auf 0.8 kleiner gemacht.
Über die meta tags in der index.html kannst du die Grids einstellen.
<meta name="widget_base_width" content="69">
<meta name="widget_base_height" content="51">
<meta name="widget_min_cols" content="17">
Bei Chrome oder Firefox kannst du im Developer Modus die Bildschirmgröße deines Gerätes für das du die Seite erstellst einstellen.
Mit einem HTML tester kannst du deine Seiten prüfen.
z.B.: https://www.freeformatter.com/html-validator.html
Gruß
Eisix
Ich arbeite mit vw/vh statt % oder px Angaben. 10vw sind z.B. 10% der horizontalen Auflösung des Viewports, 5vh analog dazu 5% der vertikalen Auflösung. So passt die Seite auf nahezu jedem Gerät.
Du solltest dann aber auch die Schrift- und Icongrößen in vh angeben, damit die mit skaliert werden. Die Seite passt sich auch beim Resize des Browserfensters an.
Wo müsste ich das mit hinschreiben ? Hier mal ein Code einer Seite..
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="page" id="content_home">
<div class="gridster">
<ul>
<li data-row="1" data-col="1" data-sizex="1" data-sizey="1">
<header>Müllkalender</header>
<div class="sheet">
<div class="row">
<div class="cell">
<div class="large firebrick" data-type="label" data-device="MeinAbfall" data-get="STATE"></div>
<div style="display:inline-block;height:3px;width:100%;background-color:#1D1F20;"></div>
<div class="cell">
<div class="col-30">
<div data-type="symbol"
data-device="MeinAbfall"
data-get="Restmuellgefaess_days"
data-warn="Restmuellgefaess_days"
data-warn-on="([0-9]|[1,2][0-9]|off)"
data-states='["off","0","1","([2-9]|[1,2][0-9])"]'
data-icons='["fa-trash-o","fa-trash-o fa-spin","fa-trash-o fa-blink","fa-trash-o"]'
data-background-icons='["none","none","none","none"]'
data-colors='["#888","#888","#888","#888"]'
class="top-space bigger">
</div>
<div class="top-narrow" data-type="label" data-device="MeinAbfall" data-pre-text="Restmüll," data-get="Restmuellgefaess_weekday"></div>
<div class="" data-type="label" data-device="MeinAbfall" data-get="Restmuellgefaess_date"></div>
</div>
<div class="col-30">
<div data-type="symbol"
data-device="MeinAbfall"
data-get="Papiertonne_days"
data-warn="Papiertonne_days"
data-warn-on="([0-9]|[1,2][0-9]|off)"
data-states='["off","0","1","([2-9]|[1,2][0-9])"]'
data-icons='["fa-trash-o","fa-trash-o fa-spin","fa-trash-o fa-blink","fa-trash-o"]'
data-background-icons='["none","none","none","none"]'
data-colors='["#0088CC","#0088CC","#0088CC","#0088CC"]'
class="top-space bigger">
</div>
<div class="top-narrow" data-type="label" data-device="MeinAbfall" data-pre-text="Papier," data-get="Papiertonne_weekday"></div>
<div class="" data-type="label" data-device="MeinAbfall" data-get="Papiertonne_date"></div>
</div>
<div class="col-30">
<div data-type="symbol"
data-device="MeinAbfall"
data-get="GelberSack_days"
data-warn="GelberSack_days"
data-warn-on="([0-9]|[1,2][0-9]|off)"
data-states='["off","0","1","([2-9]|[1,2][0-9])"]'
data-icons='["fs-bag","fs-bag fa-spin","fs-bag fa-blink","fs-bag"]'
data-background-icons='["none","none","none","none"]'
data-colors='["yellow","yellow","yellow","yellow"]'
class="top-space bigger">
</div>
<div class="top-narrow" data-type="label" data-device="MeinAbfall" data-pre-text="Plastik," data-get="GelberSack_weekday"></div>
<div class="" data-type="label" data-device="MeinAbfall" data-get="GelberSack_date"></div>
</div>
</div>
</div>
</div>
</div>
</li>
<li data-row="1" data-col="2" data-sizex="2" data-sizey="1">
<header>Wetter Rulfingen</header>
<table class="centered top-space">
<tr>
<td>
<div data-type="label" data-device="DWD" data-get="fc0_4_time" class=""></div>
<div data-type="weather" data-device="DWD" data-get="fc0_4_ww" data-imageset="amcharts" class="top-narrow"></div>
<div data-type="label" data-device="DWD" data-get="fc0_4_wwd" class=""></div>
<div data-type="label" data-device="DWD" data-get="fc0_4_TTT" data-unit="%B0C%0A" data-fix="0" class=" bigger" data-limits='[-50,0,28]' data-colors='["#0088CC","white","red"]'></div>
</td>
<td>
<div data-type="label" data-device="DWD" data-get="fc0_8_time" class=""></div>
<div data-type="weather" data-device="DWD" data-get="fc0_8_ww" data-imageset="amcharts" class="top-narrow"></div>
<div data-type="label" data-device="DWD" data-get="fc0_8_wwd" class=""></div>
<div data-type="label" data-device="DWD" data-get="fc0_8_TTT" data-unit="%B0C%0A" data-fix="0" class=" bigger" data-limits='[-50,0,28]' data-colors='["#0088CC","white","red"]'></div>
</td>
<td>
<div data-type="label" data-device="DWD" data-get="fc0_12_time" class=""></div>
<div data-type="weather" data-device="DWD" data-get="fc0_12_ww" data-imageset="amcharts" class="top-narrow"></div>
<div data-type="label" data-device="DWD" data-get="fc0_12_wwd" class=""></div>
<div data-type="label" data-device="DWD" data-get="fc0_12_TTT" data-unit="%B0C%0A" data-fix="0" class=" bigger" data-limits='[-50,0,28]' data-colors='["#0088CC","white","red"]'></div>
</td>
<td>
<div data-type="label" data-device="DWD" data-get="fc0_16_time" class=""></div>
<div data-type="weather" data-device="DWD" data-get="fc0_16_ww" data-imageset="amcharts" class="top-narrow"></div>
<div data-type="label" data-device="DWD" data-get="fc0_16_wwd" class=""></div>
<div data-type="label" data-device="DWD" data-get="fc0_16_TTT" data-unit="%B0C%0A" data-fix="0" class=" bigger" data-limits='[-50,0,28]' data-colors='["#0088CC","white","red"]'></div>
</td>
<td>
<div data-type="label" data-device="DWD" data-get="fc0_20_time" class=""></div>
<div data-type="weather" data-device="DWD" data-get="fc0_20_ww" data-imageset="amcharts" class="top-narrow"></div>
<div data-type="label" data-device="DWD" data-get="fc0_20_wwd" class=""></div>
<div data-type="label" data-device="DWD" data-get="fc0_20_TTT" data-unit="%B0C%0A" data-fix="0" class=" bigger" data-limits='[-50,0,28]' data-colors='["#0088CC","white","red"]'></div>
</td>
<td>
<div data-type="label" data-device="DWD" data-get="fc1_0_time" class=" "></div>
<div data-type="weather" data-device="DWD" data-get="fc1_0_ww" data-imageset="amcharts" class="top-narrow"></div>
<div data-type="label" data-device="DWD" data-get="fc1_0_wwd" class=""></div>
<div data-type="label" data-device="DWD" data-get="fc1_0_TTT" data-unit="%B0C%0A" data-fix="0" class="bigger" data-limits='[-50,0,28]' data-colors='["#0088CC","white","red"]'></div>
</td>
</tr>
</table>
</li>
<li data-row="1" data-col="4" data-sizex="1" data-sizey="1"> <!-- data-device="Buero_HT" Platzhalter, später Außentemp -->
<header>Wetter aktuell</header>
<div class="sheet">
<div class="row">
<div class="cell">
<div class="col-30">
<div data-type="weather" data-device="DWD" data-get="fc1_0_ww" data-imageset="amcharts" class="bigger"></div>
</div>
<div class="col-30">
<div data-type="wind_direction" data-device="DWD" data-direction="windDir" data-speed="wind" data-calm="~" data-tickstep="22.5" class="mini"></div>
<div class="cell big" data-type="label" data-device="DWD" data-get="wind" data-unit="km/h" data-fix="0"></div>
</div>
<div class="col-30">
</div>
</div>
</div>
</div>
</li>
</li>
<li data-row="1" data-col="5" data-sizex="1" data-sizey="1">
<header><Geburtstage</header>
<div class="sheet">
<div class="row">
<div class="cell">
<div class="large firebrick" data-type="label" data-device="GeburtstagsView" data-get="STATE"></div>
<div style="display:inline-block;height:3px;width:100%;background-color:#1D1F20;"></div>
<div class="cell">
<div class="col-30">
<div data-type="symbol"
data-device="GeburtstagsView"
data-get="c-today"
data-states='["1","0","([2-9])"]'
data-icons='["fa-birthday-cake","fa-birthday-cake","fa-birthday-cake warn"]'
data-colors='["orange","#888","orange"]'
class="top-space big">
</div>
<div class="top-narrow" data-type="label" data-device="GeburtstagsView" data-pre-text=" " data-get=" "></div>
<div class="" data-type="label" data-device="GeburtstagsView" data-get=" "></div>
</div>
<div class="col-30">
</div>
<div class="col-30">
</div>
</div>
</div>
</div>
</div>
</li>
<li data-row="2" data-col="1" data-sizex="2" data-sizey="2">ROW 2 | COL 1 | X 2 | Y 2</li>
<li data-row="2" data-col="3" data-sizex="1" data-sizey="3">ROW 2 | COL 3 | X 1 | Y 3</li>
<li data-row="2" data-col="4" data-sizex="1" data-sizey="1">ROW 2 | COL 4 | X 1 | Y 1</li>
<li data-row="3" data-col="4" data-sizex="1" data-sizey="2">ROW 3 | COL 4 | X 1 | Y 2</li>
<li data-row="4" data-col="1" data-sizex="1" data-sizey="1">ROW 4 | COL 1 | X 1 | Y 1</li>
<li data-row="4" data-col="2" data-sizex="1" data-sizey="1">ROW 4 | COL 2 | X 1 | Y 1</li>
</ul>
</div>
</body>
</html>
Meine Index würde so aussehen.
<!DOCTYPE html>
<html>
<head>
<title>FHEM - Hausautomatisierung</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<!-- Mobile-Web-Config -->
<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" />
<!-- Favicon-Icon -->
<link rel="shortcut icon" type="image/x-icon" href="images/home.ico" />
<!-- Cache -->
<!--<meta http-equiv="Cache-Control" content="no-store" />-->
<!-- FTUI-Settings -->
<meta name="debug" content="0">
<meta name="longpoll_type" content="websocket" />
<meta name="toast" content="1"> <!-- 1,2,3...= n Toast-Messages, 0: No Toast-Messages -->
<!-- Scripts -->
<script type="text/javascript" src="js/fhem-tablet-ui.min.js" defer></script>
<!-- Icon Fonts -->
<link rel="stylesheet" href="fonts/roman/style.css" />
<link rel="stylesheet" href="lib/font-awesome.min.css" type="text/css" />
<!-- Custom CSS -->
<link rel="stylesheet" href="css/fhem-mobil-ui.css" />
<link rel="stylesheet" href="css/animate.css" />
<link rel="stylesheet" href="css/fhem-tablet-ui.css" />
<link rel="stylesheet" href="css/fhem-tablet-ui-user.css" />
<link rel="stylesheet" href="lib/weather-icons-wind.min.css"/>
<link rel="stylesheet" href="lib/weather-icons-wind.css"/>
<link rel="stylesheet" href="lib/openautomation.min.css" type="text/css" />
<link rel="stylesheet" href="lib/openautomation.css" />
</head>
Schade, das man hier nicht einfach mit X und Y arbeiten kann und einfach alles und jedem höhe und breite mitgeben kann, so wird das immer irgendwo an einem Raster ausgerichtet. Das ist schon ganz schön schwierig manchmal, das alles so zu positionieren, wie man gerne hätte.
Zitat von: dt2510 am 30 Oktober 2019, 15:57:48
Ich arbeite mit vw/vh statt % oder px Angaben. 10vw sind z.B. 10% der horizontalen Auflösung des Viewports, 5vh analog dazu 5% der vertikalen Auflösung. So passt die Seite auf nahezu jedem Gerät.
Du solltest dann aber auch die Schrift- und Icongrößen in vh angeben, damit die mit skaliert werden. Die Seite passt sich auch beim Resize des Browserfensters an.
Hättest du mir mal einen Codeschnippsel, wie das dann eingesetzt aussieht ?
zB so; anstelle von
<div style="display:inline-block;height:3px;width:100%;background-color:#1D1F20;"></div>
den Teil von height:3px;width:100%; durch height:3vh;width:100vw; ersetzen:
<div style="display:inline-block;height:3vh;width:100vw;background-color:#1D1F20;"></div>
Zitat von: yersinia am 10 November 2019, 19:22:50
zB so; anstelle von
<div style="display:inline-block;height:3px;width:100%;background-color:#1D1F20;"></div>
den Teil von height:3px;width:100%; durch height:3vh;width:100vw; ersetzen:
<div style="display:inline-block;height:3vh;width:100vw;background-color:#1D1F20;"></div>
Danke werde ich testen. Und wie soll das bei Bildern und Texten aussehen, kommt das in die Claas mit rein dann ?
Zitat von: D3ltorohd am 10 November 2019, 20:16:12
Danke werde ich testen. Und wie soll das bei Bildern und Texten aussehen, kommt das in die Claas mit rein dann ?
Bei Schrift verwende ich z.B.
<div style="font-size:2vh;">blabla</div>Bei Bildern gibt es normalerweise width/height Angaben. Man kann auch mit Kommastellen arbeiten, z.B. 1.5vh