Hintergrundbild in mobilen Seiten

Begonnen von TWART016, 31 Dezember 2016, 02:36:19

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

TWART016

31 Dezember 2016, 02:36:19
Hallo,

ich habe eigene Seiten für Smartphones und Tablet erstellt. Bei der Tabletansicht wird mein Hintergrundbild angezeigt, so wie ich es in meiner eigenen css definiert habe.

Bei meiner Smartphoneansicht wird das Bild angezeigt und ich kann auch Transparenz für die sections definieren. Wieso funktioniert das bei der Tabletansicht nicht. Unterschiede konnte ich keine feststellen.

index Code:
Tablet
Code Auswählen
<!DOCTYPE html>
<html>
<head>
  <!--
/* FHEM tablet ui */
/*
* Just another dashboard for FHEM
*
         * Version: 1.3.5
* Requires: jQuery v1.7+, font-awesome, jquery.gridster, jquery.toast
* URL: https://github.com/knowthelist/fhem-tablet-ui
*
* Copyright (c) 2015 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 tablet_ui HTTPSRV tablet ./www/tablet Tablet Frontend' in fhem.cfg
* - Tadaaa! A new fhem ui in http://<fhem-url>:8083/fhem/tablet/
*/
-->
<title>FHEM Wohnzimmer</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="widget_base_width" content="76">
<meta name="widget_base_height" content="124">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="gridster_disable" content="1">
    <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 -->

<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/css/fhem-tablet-ui-pc.css" />


<link rel="stylesheet" href="/fhem/tablet/lib/font-awesome.min.css" />
<link rel="stylesheet" href="/fhem/tablet/lib/material-icons.min.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/lib/openautomation.css" />
<link rel="stylesheet" href="/fhem/www/tablet/customfonts/font1/style.css"/>
<link rel="stylesheet" href="/fhem/www/tablet/lib/fhemSVG.css" />
<link rel="stylesheet" href="lib/material-icons.min.css" />
<link rel="stylesheet" href="/fhem/tablet/css/m_myStyle.css" />
<link rel="stylesheet" href="css/fhem-mobil-ui-dark.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>

<!-- Enable this lines for usage with WebViewControl --><!-- -->
<script type="text/javascript" src="/fhem/pgm2/cordova-2.3.0.js"></script>
<script type="text/javascript" src="/fhem/js/webviewcontrol.js"></script>
<script type="text/javascript">var wvcDevices = {'12345': 'Tablet'}; var wvcUserCssFile="webviewcontrol.css"</script>
<!-- End for WebViewControl -->




</head>
<body>

    <!-- Demo FTUI 2.1 mobil page with slideout navigation -->

    <nav id="menu" class="bg-gray">
<section>
<div class="hbox">

<div class="vbox grow-3">
<div data-type="link" class="large" data-icon-left="fa-music" data-active-color="green"
data-load="#t_musik_kueche"
data-url="#t_musik_kueche.html"
data-color="gray"
data-active-pattern="(.*#t_musik_kueche.html)">
</div>
<div class="tiny gray">Küche
</div>
</div>
<div class="vbox grow-3">
<div data-type="link" class=" large" data-icon-left="fa-music" data-active-color="green"
data-load="#t_musik_bad"
data-url="#t_musik_bad.html"
data-color="gray"
data-active-pattern="(.*#t_musik_bad.html)">
</div>
<div class="tiny gray">Bad</div>
</div>
<div class="vbox grow-3">
<div data-type="link" class=" large" data-icon-left="fa-music" data-active-color="green"
data-load="#t_musik_wohnzimmer"
data-url="#t_musik_wohnzimmer.html"
data-color="gray"
data-active-pattern="(.*#t_musik_wohnzimmer.html)">
</div>
<div class="tiny gray"
>Wohnzimmer</div>
</div>
<div class="vbox grow-3">
<div data-type="link" class=" large" data-icon-left="fa-music" data-active-color="green"
data-load="#t_musik_iphone"
data-url="#t_musik_iphone.html"
data-color="gray"
data-active-pattern="(.*#t_musik_iphone.html)">
</div>
<div class="tiny gray">iPhone</div>
</div>

</div>
</section>
<div data-type="link" class="top-space large" data-width="150" data-text-align="left" data-active-color="green" data-color="gray"
data-icon-left="fa-dashboard"
data-load="#t_dashboard"
data-url="#t_dashboard.html"
data-active-pattern="(.*#t_dashboard.html)">Dashboard</div>
<div data-type="link" class="default large top-space" data-width="150" data-text-align="left" data-color="gray" data-active-color="green"
data-icon-left="fa-home"
data-load="#t_wohnzimmer"
data-url="#t_wohnzimmer.html"
data-active-pattern="(.*#t_wohnzimmer.html)">Wohnzimmer</div>
        <div data-type="link" class="prefetch large top-space right-narrow" data-width="150" data-text-align="left" data-color="gray" data-active-color="green"
data-icon-left="fa-bed"       
data-load="#t_schlafzimmer"
data-url="#t_schlafzimmer.html"
data-active-pattern=".*#t_schlafzimmer.html">Schlafzimmer</div>
        <div data-type="link" class="prefetch large top-space right-narrow" data-width="150" data-text-align="left" data-color="gray" data-active-color="green"
data-icon-left="mi-kitchen"
data-load="#t_kueche"
data-url="#t_kueche.html"
data-active-pattern=".*#t_kueche.html">Küche</div>
        <div data-type="link" class="nocache large top-space right-narrow" data-width="150" data-text-align="left" data-color="gray" data-active-color="green"
data-icon-left="fa-bathtub"
data-load="#t_bad"
data-url="#t_bad.html"
data-active-pattern=".*#t_bad.html">Bad</div>
<div data-type="link" class="large top-space" data-width="150" data-text-align="left" data-active-color="green" data-color="gray"
data-icon-left="mi-child_friendly"
data-load="#t_hobbyzimmer"
data-url="#t_hobbyzimmer.html"
data-active-pattern="(.*#t_hobbyzimmer.html)">Hobbyzimmer</div>
<div data-type="link" class="large top-space" data-width="150" data-text-align="left" data-active-color="green" data-color="gray"
data-icon-left="fa-cloud"
data-load="#t_wetter"
data-url="#t_wetter.html"
data-active-pattern="(.*#t_wetter.html)">Wetter</div>
<div data-type="link" class="large top-space" data-width="150" data-text-align="left" data-active-color="green" data-color="gray"
data-icon-left="fa-gears"
data-load="#t_system"
data-url="#t_system.html"
data-active-pattern="(.*#t_system.html)">System</div>
<div data-type="link" class="large top-space" data-width="150" data-text-align="left" data-active-color="green" data-color="gray"
data-icon-left="fa-music"
data-load="#t_musik"
data-url="#t_musik.html"
data-active-pattern="(.*#t_musik.html)">Musik</div>
    </nav>



   
        <header id="header-nav" class="bg-lightgray">
         <div class="hbox">
<div class="vbox items-left left-space">
<div data-type="slideout" data-icon-color="white" class="big notouch"></div>
</div>
<div class="vbox grow-9 items-left">
<div id="linkname" class="big center-align middle"></div>
</div>
<div class="vbox grow-3">
<div class="hbox">
<div data-type="clock" data-format="H:i:s" class="cell big right-narrow"></div>
</div>
  </div>
</div>
        </header>

<main id="panel" class="">
<div class="page" id="t_dashboard"></div>
<div class="page" id="t_wohnzimmer"></div>
<div class="page" id="t_schlafzimmer"></div>
<div class="page" id="t_kueche"></div>
<div class="page" id="t_bad"></div>
<div class="page" id="t_hobbyzimmer"></div>
<div class="page" id="t_wetter"></div>
<div class="page" id="t_system"></div>
<div class="page" id="t_musik_kueche"></div>
<div class="page" id="t_musik_bad"></div>
<div class="page" id="t_musik_wohnzimmer"></div>
<div class="page" id="t_musik_iphone"></div>
</main>




</body>
</html>

Smartphone
Code Auswählen

<!DOCTYPE html>
<html>
<head>
    <!--
     /* FHEM tablet ui */
     /*
     * UI builder framework for FHEM
     *
     * Version: 2.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)
     *
     * !!!! Evaluation version - run only in a staging enviroment !!!!
     *
     * - create a new folder named 'tablet_eval' in /<fhem-path>/www
     * - copy all files incl. sub folders into /<fhem-path>/www/tablet_eval
     * - add 'define TABLETUIEVAL HTTPSRV ftui_eval ./www/tablet_eval Tablet-EVAL' in fhem.cfg
     * - Tadaaa! A new fhem ui in http://<fhem-url>:8083/fhem/tablet_eval/
     */
    -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <meta name="widget_base_width" content="74">
    <meta name="widget_base_height" content="71">
    <meta name="widget_min_cols" content="13">
    <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">
    <meta name="debug" content="1">
    <meta http-equiv="Cache-Control" content="no-store" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

    <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/material-icons.min.css" />
<link rel="stylesheet" href="/fhem/www/tablet/lib/fhemSVG.css" />
<link rel="stylesheet" href="/fhem/tablet/lib/openautomation.css" />


    <link rel="stylesheet" href="lib/jquery.toast.min.css" />

<link rel="stylesheet" href="/fhem/tablet/css/m_myStyle.css" />
<link rel="stylesheet" href="css/fhem-mobil-ui-dark.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>

<link rel="stylesheet" href="/fhem/tablet/css/fhem-tablet-ui-pc.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-2x left-space-3x"
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-2x left-space-3x"
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-2x left-space-3x"
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-2x left-space-3x"
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-2x left-space-3x"
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-2x left-space-3x"
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-2x left-space-3x"
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-2x left-space-3x"
data-width="150" data-icon-left="fa-gears" 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>
</nav>


<header id="header-nav" class="bg-darkgray fixed row">
<div class="left">
<div data-type="slideout" class="col-1-2 big notouch" data-icon-color="white"></div>
<div id="linkname" class="col-1-3 big bold middle"></div>

</div>
</header>

<main id="panel" class="">
<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>
</main>




</body>
</html>



Oder hängt das an einer anderen Stelle?


Gruß
TWART016
Drucken
Nach oben Seiten1
Benutzer-Aktionen