Zentrierung header in mobiler Seite

TWART016 · 12 Februar 2017, 23:03:40

Hallo,

ich baue mir gerade eine mobile Ansicht.

Auf meinem iPhone mit Safari wird der Header nicht vertikal zentriert angezeigt. Auf dem PC und Tablet jedoch schon. Auch wenn ich das iPhone drehe, wird es korrekt angezeigt, nur im Hochformat funktioniert es nicht.

Liegt es an der Bildschirmbreite? Gibt es übrigens in FTUI die Möglichkeit herauszufinden, wie viele Pixel verwendet werden können? Ist für mich auch im Bereich des Hintergrundbilds interessant.

m_index.html

Code Auswählen

<head>
<link rel="icon" href="favicon.ico" type="image/x-icon" />

	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="mobile-web-app-capable" content="yes">
		
    <script src="js/fhem-tablet-ui.js" defer></script>

	<link rel="stylesheet" href="css/fhem-mobil-ui-dark.css" />
	<link rel="stylesheet" href="/fhem/tablet/css/fhem-tablet-ui-costum.css" />
 

    <!-- Remove this line to enable for usage with WebViewControl
    <script defer>var wvcDevices = {'12345': 'Tablet'}; var wvcUserCssFile="webviewcontrol.css"</script>
    <script src="../pgm2/cordova-2.3.0.js" defer></script>
    <script src="../pgm2/webviewcontrol.js" defer></script>
    <!-- End for WebViewControl -->

    <title>FHEM Mobile</title>
</head>

<body>

	<nav id="menu">
		<div data-type="link" class="default large top-space left-space-2x"
			data-width="150" data-icon-left="fa-dashboard"
			data-color="white" data-text-align="left"
			data-load="div#m_Dashboard" data-url="#m_Dashboard.html"
			data-active-color="blue" data-active-pattern=".*#m_Dashboard.html">Dashboard</div>
		<div data-type="link" class="large top-space left-space-2x"
			data-width="150" data-icon-left="fa-home" data-color="white"
			data-text-align="left" data-load="div#m_Wohnzimmer"
			data-url="#m_Wohnzimmer.html" data-active-color="blue"
			data-active-pattern="(.*index_mobil.html|.*#m_Wohnzimmer.html)">Wohnzimmer</div>
		<div data-type="link" class="large top-space left-space-2x"
			data-width="150" data-icon-left="fa-bed" data-color="white"
			data-text-align="left" data-load="div#m_Schlafzimmer"
			data-url="#m_Schlafzimmer.html" data-active-color="blue"
			data-active-pattern=".*#m_Schlafzimmer.html">Schlafzimmer</div>
		<div data-type="link" class="large top-space left-space-2x"
			data-width="150" data-icon-left="mi-child_friendly" data-color="white"
			data-text-align="left" data-load="div#m_Hobbyzimmer"
			data-url="#m_Hobbyzimmer.html" data-active-color="blue"
			data-active-pattern=".*#m_Hobbyzimmer.html">Hobbyzimmer</div>
		<div data-type="link" class="large top-space left-space-2x"
			data-width="150" data-icon-left="mi-kitchen" data-color="white"
			data-text-align="left" data-load="div#m_Kueche"
			data-url="#m_Kueche.html" data-active-color="blue"
			data-active-pattern=".*#m_Kueche.html">K&uuml;che</div>
		<div data-type="link" class="large top-space left-space-2x"
			data-width="150" data-icon-left="fa-bathtub" data-color="white"
			data-text-align="left" data-load="div#m_Bad"
			data-url="#m_Bad.html" data-active-color="blue"
			data-active-pattern=".*#m_Bad.html">Bad</div>
		<div data-type="link" class="large top-space left-space-2x"
			data-width="150" data-icon-left="fa-cloud" data-color="white"
			data-text-align="left" data-load="div#m_Wetter"
			data-url="#m_Wetter.html" data-active-color="blue"
			data-active-pattern=".*#m_Wetter.html">Wetter</div>
		<div data-type="link" class="large top-space left-space-2x"
			data-width="150" data-icon-left="fa-gear" data-color="white"
			data-text-align="left" data-load="div#m_Einstellungen"
			data-url="#m_Einstellungen.html" data-active-color="blue"
			data-active-pattern=".*#m_Einstellungen.html">Einstellungen</div>
		<div data-type="link" class="large top-space left-space-2x"
			data-width="150" data-icon-left="fa-gears" data-color="white"
			data-text-align="left" data-load="div#m_Automation"
			data-url="#m_Automation.html" data-active-color="blue"
			data-active-pattern=".*#m_Automation.html">Automation</div>
	</nav>

	<main id="panel" class="">
	<header id="header-nav" class="bg-darkgray">
		<div class="hbox">
			<div class="vbox items-left left-space">
				<div data-type="slideout" class="notouch big" data-icon-color="white"></div>
			</div>
			<div class="vbox grow-8 items-left">
				<div id="linkname" class="bold bigger"></div>
			</div>
		</div>
	</header>
	

	
	

	
	<div class="page" id="m_Dashboard"></div>
	<div class="page" id="m_Wohnzimmer"></div>
	<div class="page" id="m_Schlafzimmer"></div>
	<div class="page" id="m_Hobbyzimmer"></div>
	<div class="page" id="m_Kueche"></div>
	<div class="page" id="m_Bad"></div>
	<div class="page" id="m_Wetter"></div>
	<div class="page" id="m_Einstellungen"></div>
	<div class="page" id="m_Automation"></div>
	</main>




</body>

Gruß
TWART016

setstate · 13 Februar 2017, 02:41:31

Code Auswählen


        <header id="header-nav" class="bg-darkgray">
            <div class="hbox">
                <div data-type="slideout" class="notouch big" data-icon-color="white"></div>
                <div id="linkname" class="bold bigger grow-8"></div>
            </div>
        </header>

TWART016 · 13 Februar 2017, 19:02:16

Immer noch nicht. Unten ist immer noch deutlich mehr platz als oben.

Und der linkname ist zentral. Über würde das schon gerne über vbox machen, um die Inhalte besser ausrichten zu können. Ggf. kommen noch Symbole und die Uhrzeit hinzu.

geht grow-8 in einem <div> ohne vbox?

FHEM Forum

Zentrierung header in mobiler Seite

TWART016

setstate

TWART016