Widget verschoben

Kusselin · 07 März 2017, 11:39:04

Hallo,

wenn ich mir entsprechend das frontend im Laptop anschaue dann sieht alles O.K. aus.
Schaue ich mir hingegen die html seite im Ipad an ist alles verschoben und die Widgets sind vesetzt. Bilder reiche ich nach.

Updates habe ich gemacht von fhem und tabletui.

weiß jemand was das sein kann?

Gruss

viegener · 07 März 2017, 12:34:20

Ich vermute mal einmal geht es um Windows - Firefox oder Chrome und einmal um ipad - Safari
Selbst wenn es derselbe Bowsertyp ist, gibt es Unterschiede in der Darstallung. Also wird vermutlich irgendwo ein Abstand zu klein/ zu gross sein und Du musst entsprechend etwas herumprobieren.

Ohne weitere Informationen ist das aber eine sehr generische Frage und ob jemand mit Bildern helfen kann ist genauso unwahrscheinlich...

Ich versuche üblicherweise den Prowser bei Änderungen zuerst zu testen, der sich als am kritischsten herausstellt (bie mir ist das auch meist das iPad) und dann Absände zu verringern oder Fonts/Symbole kleiner darzustellen

Kusselin · 07 März 2017, 12:44:29

Hallo Viegener,

ich kann ja mal bilder machen damit man sehen kann um was es geht und das man sich mal eine Vorstellung machen kann..
Gleichzeitig kann ich auch mal meinen html-Code hier posten. Aber erst heute nachmittag.

Trotzdem danke.

Gruss

viegener · 07 März 2017, 12:49:58

Ich bin nicht sicher ob Dir da jemand helfen kann, denn es ist ja kein Fehler sondern vermutlich sind bei Dir Abstände zu weit gewählt oder zu grosse Elemente, da verhalten sich Browser unterschiedlich, das wird Dir bei vielen Webseiten begegnen und insbesondere auch wenn Bildschirmgrössen unterschiedlich sind passiert das bereits. Unter der Annahme, dass sich Dinge verschieben weil sie auf dem iPad mit mehr Raum gerendert werden, so müsstest Du in Deinem layout kleinere Symbole/Schriften etc einsetzen und schauen bis es überall passt. Das wird immer wieder vorkommen, da die Rendering engines der Browser sehr unterschiedlich agieren.

Kusselin · 07 März 2017, 17:38:12

Also ich probiers trotzdem mal..hier die Bilder:

Und hier die HTML Datei:

Code Auswählen

<html>
<head>
    <title>Wetter</title>
</head>
<body>
<div class="gridster">
	<ul>
		<!-- Menü -->
		<li data-col="1" data-row="1" data-sizex="1" data-sizey="8" data-template="menu.html"></li>

			<li data-col="2" data-row="5" data-sizex="2" data-sizey="5">
			
			 <iframe style=" border:solid 1px #777 " width="380" height="400" frameborder="0" scrolling="no"
					src="http://www.meteox.de/images.aspx?jaar=-3&voor=&soort=loop1uur&c=&n=">
				</iframe> 
		

			
			
		<!-- Wetter -->
			<li data-col="2" data-row="1" data-sizex="2" data-sizey="8">
			<header>
				<div data-type="label" class="medium">Wetter</div>
			</header>
			
			<table>
				<tr class="center">
					<header>
						<div class="inline" data-type="label" data-device="MeinWetter" data-get="fc1_day_of_week"></div>
						<div class="inline" data-type="label" data-device="MeinWetter" data-get="fc1_date"></div>
					</header>
				</tr>
				<tr class="center">
					<td>
						<div class="medium inline" data-type="weather" data-device="MeinWetter" data-get="fc1_condition"></div>
						<div class="medium inline" data-type="label" data-device="MeinWetter" data-get="temperature"></div>
						<div class="medium inline" data-type="label">C°</div>
					</td>
				</tr>
				<tr class="center"><td><div class="small" data-type="label" data-device="MeinWetter" data-get="condition"></div></td></tr>
			</table>
			<br class="small">
			<table>
				<tr class="center">
					<header class="small">
						<div class="inline" data-type="label" data-device="MeinWetter" data-get="fc2_day_of_week"></div>
						<div class="inline" data-type="label" data-device="MeinWetter" data-get="fc2_date"></div>
					</header>
				</tr>
				<tr class="center">
					<td>
						<div class="medium inline" data-type="weather" data-device="MeinWetter" data-get="fc2_condition"></div>
						<div class="medium inline" data-type="label" data-device="MeinWetter" data-get="fc2_high_c"></div>
						<div class="medium inline" data-type="label">C°</div>
						
					</td>
				</tr>
				<tr class="center"><td><div class="small" data-type="label" data-device="MeinWetter" data-get="fc2_condition"></div></td></tr>
			</table>
			<br class="small">
			<table>
				<tr class="center">
					<header class="small">
						<div class="inline" data-type="label" data-device="MeinWetter" data-get="fc3_day_of_week"></div>
						<div class="inline" data-type="label" data-device="MeinWetter" data-get="fc3_date"></div>
					</header>
				</tr>
				<tr class="center">
					<td>
						<div class="medium inline" data-type="weather" data-device="MeinWetter" data-get="fc3_condition"></div>
						<div class="medium inline" data-type="label" data-device="MeinWetter" data-get="fc3_high_c"></div>
						<div class="medium inline" data-type="label">C°</div>
					</td>
				</tr>
				<tr class="center"><td><div class="small" data-type="label" data-device="MeinWetter" data-get="fc3_condition"></div></td></tr>
			</table>
			<br class="small">
			<table>
				<tr class="center">
					<header class="small">
						<div class="inline" data-type="label" data-device="MeinWetter" data-get="fc4_day_of_week"></div>
						<div class="inline" data-type="label" data-device="MeinWetter" data-get="fc4_date"></div>
					</header>
				</tr>
				<tr class="center">
					<td>
						<div class="medium inline" data-type="weather" data-device="MeinWetter" data-get="fc4_condition"></div>
						<div class="medium inline" data-type="label" data-device="MeinWetter" data-get="fc4_high_c"></div>
						<div class="medium inline" data-type="label">C°</div>
						
					</td>
				</tr>
				<tr class="center"><td><div class="small" data-type="label" data-device="MeinWetter" data-get="fc4_condition"></div></td></tr>
			</table>
			<br class="small">
			<table>
				<tr class="center">
					<header class="small">
						<div class="inline" data-type="label" data-device="MeinWetter" data-get="fc5_day_of_week"></div>
						<div class="inline" data-type="label" data-device="MeinWetter" data-get="fc5_date"></div>
					</header>
				</tr>
				<tr class="center">
					<td>
						<div class="medium inline" data-type="weather" data-device="MeinWetter" data-get="fc5_condition"></div>
						<div class="medium inline" data-type="label" data-device="MeinWetter" data-get="fc5_high_c"></div>
						<div class="medium inline" data-type="label">C°</div>
						
					</td>
				</tr>
				<tr class="center"><td><div class="small" data-type="label" data-device="MeinWetter" data-get="fc5_condition"></div></td></tr>
			</table>
			<br class="small">
			<table>
				<tr class="center">
					<header class="small">
						<div class="inline" data-type="label" data-device="MeinWetter" data-get="fc6_day_of_week"></div>
						<div class="inline" data-type="label" data-device="MeinWetter" data-get="fc6_date"></div>
					</header>
				</tr>
				<tr class="center">
					<td>
						<div class="medium inline" data-type="weather" data-device="MeinWetter" data-get="fc6_condition"></div>
						<div class="medium inline" data-type="label" data-device="MeinWetter" data-get="fc6_high_c"></div>
						<div class="medium inline" data-type="label">C°</div>
						
					</td>
				</tr>
				<tr class="center"><td><div class="small" data-type="label" data-device="MeinWetter" data-get="fc6_condition"></div></td></tr>
			</table>
			
		
		
		<li data-row="1" data-col="2" data-sizex="4" data-sizey="3">
	<header>Pollenwarnung</header>
	<table width="100%">
		<tr>
			<td>
			        <div data-type="symbol" data-device="Pollenflugvorhersage" data-get="fc1_Ampfer"
			                data-icons='["oa-weather_pollen","oa-weather_pollen","oa-weather_pollen","oa-weather_pollen"]'
			                data-get-on='["rc_dot@white","rc_dot@yellow","rc_dot@orange","rc_dot@red"]'
			                data-on-colors='["grey","yellowgreen","yellow","red"]'
			                class="darker inline small"></div>
			        <div data-type="label">Ampfer</div>
			</td>
			<td>
			        <div data-type="symbol" data-device="Pollenflugvorhersage" data-get="fc1_Ambrosia"
			                data-icons='["oa-weather_pollen","oa-weather_pollen","oa-weather_pollen","oa-weather_pollen"]'
			                data-get-on='["rc_dot@white","rc_dot@yellow","rc_dot@orange","rc_dot@red"]'
			                data-on-colors='["grey","yellowgreen","yellow","red"]'
			                class="darker inline small"></div>
			        <div data-type="label">Ambrosia</div>
			</td>
			<td>
			        <div data-type="symbol" data-device="Pollenflugvorhersage" data-get="fc1_Beifuss"
			                data-icons='["oa-weather_pollen","oa-weather_pollen","oa-weather_pollen","oa-weather_pollen"]'
			                data-get-on='["rc_dot@white","rc_dot@yellow","rc_dot@orange","rc_dot@red"]'
			                data-on-colors='["grey","yellowgreen","yellow","red"]'
			                class="darker inline small"></div>
			        <div data-type="label">Erle</div>
			</td>
			<td>
			        <div data-type="symbol" data-device="Pollenflugvorhersage" data-get="fc1_Birke"
			                data-icons='["oa-weather_pollen","oa-weather_pollen","oa-weather_pollen","oa-weather_pollen"]'
			                data-get-on='["rc_dot@white","rc_dot@yellow","rc_dot@orange","rc_dot@red"]'
			                data-on-colors='["grey","yellowgreen","yellow","red"]'
			                class="darker inline small"></div>
			        <div data-type="label">Hasel</div>
			</td>
			<td>
			        <div data-type="symbol" data-device="Pollenflugvorhersage" data-get="fc1_Buche"
			                data-icons='["oa-weather_pollen","oa-weather_pollen","oa-weather_pollen","oa-weather_pollen"]'
			                data-get-on='["rc_dot@white","rc_dot@yellow","rc_dot@orange","rc_dot@red"]'
			                data-on-colors='["grey","yellowgreen","yellow","red"]'
			                class="darker inline small"></div>
			        <div data-type="label">Buche</div>
			</td>
		</tr>
		<tr>
			<td>
			        <div data-type="symbol" data-device="Pollenflugvorhersage" data-get="fc1_Eiche"
			                data-icons='["oa-weather_pollen","oa-weather_pollen","oa-weather_pollen","oa-weather_pollen"]'
			                data-get-on='["rc_dot@white","rc_dot@yellow","rc_dot@orange","rc_dot@red"]'
			                data-on-colors='["grey","yellowgreen","yellow","red"]'
			                class="darker inline small"></div>
			        <div data-type="label">Eiche</div>
			</td>
			<td>
			        <div data-type="symbol" data-device="Pollenflugvorhersage" data-get="fc1_Erle"
			                data-icons='["oa-weather_pollen","oa-weather_pollen","oa-weather_pollen","oa-weather_pollen"]'
			                data-get-on='["rc_dot@white","rc_dot@yellow","rc_dot@orange","rc_dot@red"]'
			                data-on-colors='["grey","yellowgreen","yellow","red"]'
			                class="darker inline small"></div>
			        <div data-type="label">Erle</div>
			</td>
			<td>
			        <div data-type="symbol" data-device="Pollenflugvorhersage" data-get="fc1_Graeser"
			                data-icons='["oa-weather_pollen","oa-weather_pollen","oa-weather_pollen","oa-weather_pollen"]'
			                data-get-on='["rc_dot@white","rc_dot@yellow","rc_dot@orange","rc_dot@red"]'
			                data-on-colors='["grey","yellowgreen","yellow","red"]'
			                class="darker inline small"></div>
			        <div data-type="label">Graeser</div>
			</td>
			<td>
			        <div data-type="symbol" data-device="Pollenflugvorhersage" data-get="fc1_Hasel"
			                data-icons='["oa-weather_pollen","oa-weather_pollen","oa-weather_pollen","oa-weather_pollen"]'
			                data-get-on='["rc_dot@white","rc_dot@yellow","rc_dot@orange","rc_dot@red"]'
			                data-on-colors='["grey","yellowgreen","yellow","red"]'
			                class="darker inline small"></div>
			        <div data-type="label">Hasel</div>
			</td>
			<td>
			        <div data-type="symbol" data-device="Pollenflugvorhersage" data-get="fc1_Pappel"
			                data-icons='["oa-weather_pollen","oa-weather_pollen","oa-weather_pollen","oa-weather_pollen"]'
			                data-get-on='["rc_dot@white","rc_dot@yellow","rc_dot@orange","rc_dot@red"]'
			                data-on-colors='["grey","yellowgreen","yellow","red"]'
			                class="darker inline small"></div>
			        <div data-type="label">Pappel</div>
			</td>
		</tr>
		<tr>
			<td>
			        <div data-type="symbol" data-device="Pollenflugvorhersage" data-get="fc1_Roggen"
			                data-icons='["oa-weather_pollen","oa-weather_pollen","oa-weather_pollen","oa-weather_pollen"]'
			                data-get-on='["rc_dot@white","rc_dot@yellow","rc_dot@orange","rc_dot@red"]'
			                data-on-colors='["grey","yellowgreen","yellow","red"]'
			                class="darker inline small"></div>
			        <div data-type="label">Roggen</div>
			</td>
			<td>
			        <div data-type="symbol" data-device="Pollenflugvorhersage" data-get="fc1_Ulme"
			                data-icons='["oa-weather_pollen","oa-weather_pollen","oa-weather_pollen","oa-weather_pollen"]'
			                data-get-on='["rc_dot@white","rc_dot@yellow","rc_dot@orange","rc_dot@red"]'
			                data-on-colors='["grey","yellowgreen","yellow","red"]'
			                class="darker inline small"></div>
			        <div data-type="label">Ulme</div>
			</td>
			<td>
			        <div data-type="symbol" data-device="Pollenflugvorhersage" data-get="fc1_Wegerich"
			                data-icons='["oa-weather_pollen","oa-weather_pollen","oa-weather_pollen","oa-weather_pollen"]'
			                data-get-on='["rc_dot@white","rc_dot@yellow","rc_dot@orange","rc_dot@red"]'
			                data-on-colors='["grey","yellowgreen","yellow","red"]'
			                class="darker inline small"></div>
			        <div data-type="label">Wegerich</div>
			</td>
			<td>
			        <div data-type="symbol" data-device="Pollenflugvorhersage" data-get="fc1_Weide"
			                data-icons='["oa-weather_pollen","oa-weather_pollen","oa-weather_pollen","oa-weather_pollen"]'
			                data-get-on='["rc_dot@white","rc_dot@yellow","rc_dot@orange","rc_dot@red"]'
			                data-on-colors='["grey","yellowgreen","yellow","red"]'
			                class="darker inline small"></div>
			        <div data-type="label">Weide</div>
			</td>
		</tr>
	</table>
</li>	
	
</li>
	</ul>
</div>
</body>
</html>

Gesendet von iPhone mit Tapatalk Pro

ArduPino · 07 März 2017, 23:31:17

Das sieht schon extrem unterschiedlich aus. Benutze Browser (Edge, für andere Sachen ist der eh nicht zu gebrauchen) und ein 10" Tablet. Schau mal ob du die Positionen richtig eingegeben hast. Die einzelnen Fenster rutschen zwar immer nach oben, wenn aber auf einmal viel mehr Platz vorhanden ist, wird das alles anders angeordnet.
Beim neu laden der Seite sieht man das, wenn sich dann darauf etwas verschiebt, passt was nicht.

Gesendet von meinem Wileyfox Swift mit Tapatalk

FHEM Forum

Widget verschoben

Kusselin

viegener

Kusselin

viegener

Kusselin

ArduPino