[Gelöst] Tablet UI passt sich in seltsamer Weise an die Fenstergröße an

Thorsten Pferdekaemper · 23 Februar 2016, 23:46:27

Hi,
meine Tablet-UI Anzeige haut's zusammen, wenn sie nicht ins Browser-Window passt. Das passiert unabhängig vom Browser. Ziemlich hässlich ist das ganze, wenn man das Tablet hochkant hält. Dann hilft auch drehen nichts, man braucht erstmal einen Reload.
Weiß jemand, wie man das verhindert? Am liebsten wäre mir, wenn es gar nicht erst versucht, sich an die Fenstergröße anzupassen.
Ich habe zwei Bilder angehängt, damit etwas klarer wird, was ich meine.
Gruß,
Thorsten

roman1528 · 23 Februar 2016, 23:58:44

COOOOL

Das ist neu

Hast du folgende Zeile in deinem/deinen <head>-Tag/s???

Code Auswählen

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

Wenn nicht, oder wenn es auf 0 steht kann man die <gridster>-Elemente nämlich verschieben... Möglicherweise existiert dadurch dann auch soetwas wie ein responsive-Verhalten.

Grüße^^

EDIT:
Ich kann das bei mir leider nicht reproduzieren... Egal ob PC oder Tablet.

roman1528 · 24 Februar 2016, 00:03:42

Und gib mal bitte den Code von der Seite von der du auch die Screenshot's gemacht hast.

TWART016 · 24 Februar 2016, 00:53:49

Hi,

ich denke er meint nicht das Drag & Drop des Gridsters.

Wenn z.B. links (1/2 bis 8/2) ein Menü ist, und ab Spalte 2 mehrere Breite Fenster sind, ordnen sich die Gridster bei Neuladen von alleine neu an, wenn das Browserfenster nicht breit genug ist.
Ist gut zu testen mit einem sehr kleinen Browserfenster oder Smartphone.

Thorsten Pferdekaemper · 24 Februar 2016, 08:17:42

Zitat von: roman1528 am 23 Februar 2016, 23:58:44Hast du folgende Zeile in deinem/deinen <head>-Tag/s???
Code Auswählen Erweitern
<meta name="gridster_disable" content="1">

Die Zeile hatte ich nicht drin. Jetzt habe ich sie hinzugefügt, aber das macht auch keinen Unterschied.

Zitat von: roman1528 am 24 Februar 2016, 00:03:42
Und gib mal bitte den Code von der Seite von der du auch die Screenshot's gemacht hast.

Bitteschön:

Code Auswählen



<!DOCTYPE html>
<html>
<head>
	<title>
    Schlafzimmer	</title>
	
    <meta http-equiv="Pragma" content="no-cache"> 
    <meta http-equiv="Expires" content="-1"> 
    <meta http-equiv="cache-control" content="no-store"> 
	
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
	<meta name="gridster_disable" content="1">
	<meta name="widget_base_width" content="127">
	<meta name="widget_base_height" content="108">
	<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"> 
	<meta name="debug" content="0"> 
	
	<link rel="stylesheet" href="/fhem/tablet/lib/jquery.gridster.min.css" />
	<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/jquery.toast.min.css" />
	<link rel="stylesheet" href="/fhem/tablet/lib/powerange.min.css" />
	<link rel="stylesheet" href="/fhem/tablet/css/fhem-tablet-ui-wdtimer.css" />
	<link rel="stylesheet" href="/fhem/tablet/style.css">
	
	<script type="text/javascript" src="/fhem/pgm2/jquery.min.js"></script>
    <script type="text/javascript" src="/fhem/tablet/lib/jquery.knob.mod.min.js"></script>
	<script type="text/javascript" src="/fhem/tablet/lib/jquery.toast.min.js"></script>
	<script type="text/javascript" src="/fhem/tablet/lib/jquery.circlemenu.js"></script>
	<script type="text/javascript" src="/fhem/tablet/lib/powerange.min.js"></script>
	<script type="text/javascript" src="/fhem/tablet/lib/jquery.gridster.min.js"></script>
    <script type="text/javascript" src="/fhem/tablet/lib/fa-multi-button.min.js"></script>
	
	<script type="text/javascript" src="/fhem/tablet/js/fhem-tablet-ui.js"></script>


<style type="text/css">
	td {
		color: #808080;
	}
</style>

</head>
<body>

<div class="gridster">
<ul>

<!-- Menue and Clock -->
<!-- ============ Home-Button ============= -->
<!-- ====================================== -->
<li data-row="1" data-col="1" data-sizex="1" data-sizey="1">

<header>HOME</header>
<div style="padding-top:16px !important">
	
		<div data-type="link" data-color="grey" data-border-color="grey" data-url="index.php" 
			 data-icon="fa-home" class="round">Home</div>
		</div></li>

<!-- ========= Linkes-HauptmenÃ¼ =========== -->
<!-- ====================================== -->
<li data-row="2" data-col="1" data-sizex="1" data-sizey="4">


<header>R&Auml;UME</header>
	
		<div data-type="link" data-color="grey" data-border-color="grey" data-url="kueche.php" 
			 data-icon="fa-cutlery" class="round">K&uuml;che</div>
			
		<div data-type="link" data-color="#aa6900" data-border-color="#aa6900" data-url="schlafzimmer.php" 
			 data-icon="fa-bed" class="round">Schlafen</div>
			
		<div data-type="link" data-color="grey" data-border-color="grey" data-url="wohnzimmer.php" 
			 data-icon="nesges-sofa" class="round">Wohnen</div>
			
		<div data-type="link" data-color="grey" data-border-color="grey" data-url="buero.php" 
			 data-icon="fa-child" class="round">Wombel</div>
			
		<div data-type="link" data-color="grey" data-border-color="grey" data-url="bad.php" 
			 data-icon="nesges-man-woman" class="round">Bad</div>
			
		<div data-type="link" data-color="grey" data-border-color="grey" data-url="flur.php" 
			 data-icon="oa-fts_door_open" class="round">Flur</div>
			
		<div data-type="link" data-color="grey" data-border-color="grey" data-url="system.php" 
			 data-icon="fa-server" class="round">System</div>
		</li>

<!-- ============= Uhr ================ --> 
<!-- ====================================== --> 
<li data-row="1" data-col="6" data-sizex="2" data-sizey="1"> 
<header>UHRZEIT</header> 
<div data-type="clock" data-format="H:i" class="container bigger"></div> 
<div data-type="clock" data-format="d.M Y" class="cell"></div> </li>

<li data-row="1" data-col="2" data-sizex="4" data-sizey="1">
		<table class="top-space">
		<tr>
		<td>
		<div data-type="button" data-icon="fa-bed" 
			 data-on-color="#2A2A2A" data-on-background-color="#aa6900" data-off-color="#2A2A2A" data-off-background-color="#505050" 
			 class="cell small readonly"></div>
		</td>
		<td>	
		<div style="color: #808080;text-transform:uppercase;" class="bigger">Schlafzimmer</div>
		</td>
		</tr>
		</table>
		</li>
<li data-row="2" data-col="2" data-sizex="4" data-sizey="2">
    <header>HEIZUNG</header>
	
	<div data-type="thermostat" data-device="dg_sz_HeizungOp" data-valve="ValvePosition" data-step="0.5"
		 class="cell left big">
	</div>
	<table>
		<tr>
			<td class="big">Temperatur:</td>
			<td>
				<div data-type="label" 
					 data-device="dg_sz_HeizungOp" 
					 data-get="measured-temp"
					 data-unit=" %B0C%0A"
					 data-limits="[0,10,15,21,23]"
					 data-colors='["#ffffff","#6699ff","#AA6900","#AD3333","#FF0000"]'
					 class="cell big narrow">
				</div>
			</td>
		</tr> 
	</table></li>

<li data-row="4" data-col="2" data-sizex="2" data-sizey="2">
    <header>ROLLLADEN</header>	
	
	<table>	
		<tr>
			<td>
				<div data-type="symbol" class="cell bigger left" data-device="dg_sz_Rollladen" data-get="level"
					data-icons='["oa-fts_shutter_100","oa-fts_shutter_90",
				 "oa-fts_shutter_80","oa-fts_shutter_70","oa-fts_shutter_60","oa-fts_shutter_50",
				 "oa-fts_shutter_40","oa-fts_shutter_30","oa-fts_shutter_20","oa-fts_shutter_10","oa-fts_window_2w"]'
    data-get-on='["0","10","20","30","40","50","60","70","80","90","100"]' data-on-color="#2A2A2A" 
	data-on-background-color="#aa6900" data-background-icon="fa-square">
				</div>
			</td>
			<td>  
				<div class="triplebox-v left" >
					<div data-type="push" data-device="dg_sz_Rollladen" data-icon="fa-chevron-up" data-background-icon="fa-square-o" data-set-on="up" class=""> </div>
					<div data-type="push" data-device="dg_sz_Rollladen" data-icon="fa-minus" data-background-icon="fa-square-o" data-set-on="stop" class=""> </div>
					<div data-type="push" data-device="dg_sz_Rollladen" data-icon="fa-chevron-down" data-background-icon="fa-square-o" data-set-on="down" class=""> </div>
				</div> 
			</td>
						<td>
          <div data-type="select" data-device="dg_sz_Rollladen" data-items='["0","10","20","30","40","50","60","70","80","90","100"]' 
		       data-alias='["Zu","10%","20%","30%","40%","50%","60%","70%","80%","90%","Auf"]' data-get="level" data-set="level" class="cell" ></div>
			</td>
		</tr>				
		<tr>
			<td>
		<div style="position:absolute; bottom:0; right:0;"
          data-type="wdtimer" 
          data-device="dg_sz_RollladenTimer"    
          data-style="round" 
          data-theme="dark" 
          data-title="Rollladen Schlafzimmer"  
		  data-sortcmdlist="MANUELL"
          data-cmdlist='{"Zu":"0","Auf":"100","10%":"10","20%":"20","30%":"30","40%":"40","50%":"50","60%":"60","70%":"70","80%":"80","90%":"90"}' 
        >
       <div data-type="button" class="cell small readonly" data-icon="oa-edit_settings" data-background-icon="fa-square-o" 
	        data-on-color="#505050" data-on-background-color="#505050">
		</div>
        </div> 
			</td>
		</tr>
	</table> </li>

<li data-row="2" data-col="6" data-sizex="2" data-sizey="2">		
		   <header>LICHT</header>	
	
 	<table width="100%" style="padding-top:10px !important">
		<tr><td>
		<div data-type="switch" class="cell narrow"  
			data-device="dg_sz_Lampe11" 
			data-get-on="on.*"
			data-get-off="off"
			data-set-on="on">
		</div>
		</td></tr>
		<tr><td></td></tr>
	</table>
			
</li>

<li data-row="4" data-col="4" data-sizex="4" data-sizey="2"></li>	
</ul>
</div>
</body>
</html>

Möglicherweise sieht das ganze etwas durcheinander aus, das liegt aber daran, dass der Code eigentlich durch ein paar PHP-Skripte erzeugt wird.

Zitat von: TWART016 am 24 Februar 2016, 00:53:49
ich denke er meint nicht das Drag & Drop des Gridsters.

Da hast Du Recht.

Zitat
Wenn z.B. links (1/2 bis 8/2) ein Menü ist, und ab Spalte 2 mehrere Breite Fenster sind, ordnen sich die Gridster bei Neuladen von alleine neu an, wenn das Browserfenster nicht breit genug ist.
Ist gut zu testen mit einem sehr kleinen Browserfenster oder Smartphone.

Genau so...
Das Problem bleibt. Hat noch jemand eine Idee?
Gruß,
Thorsten

kvo1 · 24 Februar 2016, 08:36:53

Ich kann das so bisher auf die schnelle auch nicht nachvollziehen, bei mir verschiebt sich da nix.

zap · 24 Februar 2016, 08:37:43

Ich würde sagen, das ist normales Verhalten. der Browser bricht Elemente automatisch um, wenn sie nicht mehr in die Zeile passen. Das automatische Drehen sollte man ggf. im Tablet deaktivieren können (zumindest bei IOS geht das recht einfach).

Ich hatte hier mal irgendwann beschrieben, wie man die maximale Auflösung einer Browserseite ermitteln kann, um Umbrüche zu vermeiden. Finde es aber gerade nicht. Stichwort physikalische Auflösung vs. CSS-Auflösung oder auch "Device/Pixel Ratio".

Thorsten Pferdekaemper · 24 Februar 2016, 08:48:39

Zitat von: zap am 24 Februar 2016, 08:37:43
Ich würde sagen, das ist normales Verhalten. der Browser bricht Elemente automatisch um, wenn sie nicht mehr in die Zeile passen.

Naja, das kann schon sein. Ich kenne aber sonst keine Internet-Seite, die sowas macht.

Zitat
Das automatische Drehen sollte man ggf. im Tablet deaktivieren können (zumindest bei IOS geht das recht einfach).

Klar, das ist kein Problem. Das geht aber am Problem vorbei. Ich will ja gerade das automatische Drehen, aber die Seite soll sich dadurch nicht verändern. (Außer natürlich ihre Ausrichtung relativ zum Tablet.)

Zitat
Ich hatte hier mal irgendwann beschrieben, wie man die maximale Auflösung einer Browserseite ermitteln kann, um Umbrüche zu vermeiden. Finde es aber gerade nicht. Stichwort physikalische Auflösung vs. CSS-Auflösung oder auch "Device/Pixel Ratio".

Das will ich eigentlich auch nicht. Naja, so als Workaround vielleicht, dass die ganze Seite einfach kleiner wird. Allerdings finde ich das auch nicht gut. Lieber wären mir einfach Scrollbalken, wenn die Seite nicht draufpasst.
Gruß,
Thorsten

Thorsten Pferdekaemper · 24 Februar 2016, 09:05:55

Hi,
ich hab's jetzt hinbekommen:

Code Auswählen


<div class="gridster" style="width:965px">

Gruß,
Thorsten

setstate · 24 Februar 2016, 12:05:01

Wem Gridster nicht gefällt, kann es jetzt auch außen vor lassen. Einfach

Zitat<script src="/fhem/tablet/lib/jquery.gridster.min.js" defer></script>
<link rel="stylesheet" href="/fhem/tablet/lib/jquery.gridster.min.css" />

weglassen.

Dann kann man sich zum Beispiel http://getbootstrap.com/ oder http://flexboxgrid.com/ runterladen und einbinden

z.B.

Code Auswählen

<link rel="stylesheet" href="/fhem/tablet/lib/bootstrap.min.css" />

und deren Klassen für das Layout nutzen. Damit sollte man aber schon etwas Übung haben. Das ist nicht so verständlich wie bei Gridster (für mich jedenfalls)

Bootstrap Grid

Code Auswählen

<!DOCTYPE html>
<html>
<head>
    <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="0"> <!-- 1=output to console;0=not output -->
    <meta http-equiv="Cache-Control" content="no-store" />

    <link rel="stylesheet" href="/fhem/tablet/lib/bootstrap.min.css" />
    <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/jquery.toast.min.css" />

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

    <title>FHEM-Tablet-UI</title>
</head>
<body>
<div class="row">
        <div class="col-sm-6">
            <div class="row">
                <div class="col-sm-6  bg-gray">
                    <div data-type="switch" data-device="GalerieLicht"></div>
                    <div>Galerie</div>
                </div>
                <div class="col-sm-6  bg-green">
                    <div data-type="switch" data-device="GalerieLicht"></div>
                    <div>Galerie</div>
                </div>
             </div>
        </div>
        <div class="col-sm-6 bg-blue">
            <div data-type="volume" data-device='AvReceiver' data-get='volume' data-set='volume' class="large" ></div>
            <div class="top-narrow-2x">Volume</div>
        </div>
</div>
</body>
</html>

Flexbox Grid

Code Auswählen

<!DOCTYPE html>
<html>
<head>
    <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="0"> <!-- 1=output to console;0=not output -->
    <meta http-equiv="Cache-Control" content="no-store" />

    <link rel="stylesheet" href="/fhem/tablet/lib/flexboxgrid.min.css" />
    <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/jquery.toast.min.css" />

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

    <title>FHEM-Tablet-UI</title>
</head>
<body>
<div class="row center-xs middle-xs">
        <div class="col-xs bg-gray">
            <div class="row center-xs middle-xs">
                <div class="col-xs  bg-green">
                    <div data-type="switch" data-device="GalerieLicht"></div>
                    <div>Galerie</div>
                </div>
                <div class="col-xs  bg-red">
                    <div data-type="switch" data-device="GalerieLicht"></div>
                    <div>Galerie</div>
                </div>
             </div>
        </div>
        <div class="col-xs bg-blue">
            <div data-type="volume" data-device='AvReceiver' data-get='volume' data-set='volume' class="large" ></div>
            <div class="top-narrow-2x">Volume</div>
        </div>
</div>
</body>
</html>

zap · 24 Februar 2016, 12:50:01

Zitat von: Thorsten Pferdekaemper am 24 Februar 2016, 09:05:55
Hi,
ich hab's jetzt hinbekommen:
Code Auswählen Erweitern
<div class="gridster" style="width:965px">
Gruß,
Thorsten

Interessant. Und wie äußert sich das dann beim Drehen des Tablets? Werden dann Scrollleisten eingeblendet?

Thorsten Pferdekaemper · 24 Februar 2016, 13:24:55

Zitat von: zap am 24 Februar 2016, 12:50:01
Interessant. Und wie äußert sich das dann beim Drehen des Tablets? Werden dann Scrollleisten eingeblendet?

Ja, hab's grad ausprobiert.
Gruß,
Thorsten

StefanD · 28 Februar 2016, 15:55:38

Ich hatte das gleiche Problem, bei einigen meiner Pagetabs und habe den MetaTag für viewport kurzerhand auskommentiert.

Dadurch wird im Hochformat jeder PageTab zwar soweit ausgezoomt, dass alles zu sehen ist und ich für die Bedienung einzoomen muss, aber das stört mich nicht weiter. Das Tablet an der Wand, das ich für den Aufbau der PageTabs als "Referenz" genommen habe, stellt den Inhalt korrekt dar.

Mir ist klar, dass die ideale Darstellung nur über den viewport MetaTag führt, aktuell ist das für mich aber kein Thema und die "mal eben Bedienung" über ein anderes Device ist für mich eher die Ausnahme denn die Regel.

VG
Stefan