Ergebnis 1 bis 8 von 8

Thema: Android Browser stellt Footer falsch da?

  1. #1
    Contao-Nutzer Avatar von pix
    Registriert seit
    23.06.2009.
    Beiträge
    110

    Standard Android Browser stellt Footer falsch da?

    Ich möchte den Footer gerne über die komplette breite der Seite haben deshalb habe ich in der fe_page.html5 den Footer außerhalb des wrapper gestellt. Auf PC Browsern funktioniert auch alles soweit aber in Android Browsern kommt es zu einer Verschiebung oder was auch immer. Ich habe alles unnötige im Seitentemplate deaktiviert um den Fehler eingrenzen zu können leider seit 2 Tagen suchen ohne Erfolg.
    Den Viewport habe ich aus dem Template vorerst entfernt. Ich bin leicht verzweifelt und freue mich über jeden Lösungsansatz.

    Link zur Seite:http://verein.s15407066.onlinehome-server.info/

    Srcreen Android Browser: Screenshot_2014-07-20-11-46-42.png

    Meine fe_page.html5:

    PHP-Code:
    <!DOCTYPE html>
    <html lang="<?php echo $this->language?>">
    <head>

      <meta charset="<?php echo $this->charset?>">
      <title><?php echo $this->pageTitle?> - <?php echo $this->mainTitle?></title>
      <base href="<?php echo $this->base?>">

      <meta name="robots" content="<?php echo $this->robots?>">
      <meta name="description" content="<?php echo $this->description?>">
      <meta name="keywords" content="<?php echo $this->keywords?>">
      <meta name="generator" content="Contao Open Source CMS">


      <?php echo $this->framework?>
      <?php echo $this->stylesheets?>
      <?php echo $this->mooScripts?>
      <?php echo $this->head?>
      <!--[if lt IE 9]><script src="<?php echo TL_ASSETS_URL?>assets/html5shiv/<?php echo HTML5SHIV?>/html5shiv.js"></script><![endif]-->

    </head>
    <body id="top" class="{{ua::class}}<?php if ($this->class): ?> <?php echo $this->class?><?php endif; ?>"<?php if ($this->onload): ?> onload="<?php echo $this->onload?>"<?php endif; ?>>

      <?php echo $this->getCustomSections('top'); ?>

      <div id="wrapper">

        <?php if ($this->header): ?>
          <header id="header">
            <div class="inside">
              <?php echo $this->header?>
            </div>
          </header>
        <?php endif; ?>

        <?php echo $this->getCustomSections('before'); ?>

        <div id="container" class="maincontent">
          <div id="main">
            <div class="inside">
              <?php echo $this->main?>
            </div>
            <?php echo $this->getCustomSections('main'); ?>
          </div>

          <?php if ($this->left): ?>
            <aside id="left">
              <div class="inside">
                <?php echo $this->left?>
              </div>
            </aside>
          <?php endif; ?>

          <?php if ($this->right): ?>
            <aside id="right">
              <div class="inside">
                <?php echo $this->right?>
              </div>
            </aside>
          <?php endif; ?>
          </div>
        
            <?php echo $this->getCustomSections('after'); ?>
        
       </div>


       <?php if ($this->footer): ?>
          <footer id="footer">
            <div class="inside content_footer">
              <?php echo $this->footer?>
            </div>
          </footer> 
        
        <?php endif; ?>
        

      

        

      <?php echo $this->getCustomSections('bottom'); ?>

      <?php echo $this->mootools?>

      <?php if (!$this->disableCron): ?>
        <script>
          <?php if ($this->layout->addJQuery): ?>
            setTimeout(function(){jQuery.ajax("system/cron/cron.txt",{complete:function(e){var t=e.responseText||0;parseInt(t)<Math.round(+(new Date)/1e3)-<?php echo $this->cronTimeout?>&&jQuery.ajax("system/cron/cron.php")}})},5e3)
          <?php else: ?>
            setTimeout(function(){(new Request({url:"system/cron/cron.txt",onComplete:function(e){e||(e=0),parseInt(e)<Math.round(+(new Date)/1e3)-<?php echo $this->cronTimeout?>&&(new Request({url:"system/cron/cron.php"})).get()}})).get()},5e3)
          <?php endif; ?>
        </script>
      <?php endif; ?>

    </body>
    </html>
    Geändert von pix (20.07.2014 um 11:11 Uhr)

  2. #2
    Contao-Urgestein
    Registriert seit
    03.06.2010.
    Ort
    Wuppertal
    Beiträge
    2.149
    User beschenken
    Wunschliste

    Standard

    Gib dem Footer doch mal testweise eine Breite von 100%.

    Hast du eventuell ein mobiles Layout aktiviert wo das geänderte Template noch nicht geladen ist?

  3. #3
    Contao-Nutzer Avatar von pix
    Registriert seit
    23.06.2009.
    Beiträge
    110

    Standard

    Leider helfen die 100% nicht weiter. Ansonsten verwende ich nur ein Layout für alle Endgeräte oder kann man sonst irgendwo noch ein Mobiles Layout außer als in der Seitenstruktur aktivieren/deaktivieren?

  4. #4
    Community-Moderator
    Wandelndes Contao-Lexikon
    Avatar von Spooky
    Registriert seit
    12.04.2012.
    Ort
    Scotland
    Beiträge
    34.319
    Partner-ID
    10107

    Standard

    Wenn ich die Seite über Google Chrome öffne (Englisch) kommt "No root page found". Das erschwert mir das Debugging . Evt. hast du vergessen den Sprachen Fallback zu aktivieren.

    Aber wie auch immer - dein Problem löst sich wahrscheinlich, wenn du folgenden Viewport setzt:
    PHP-Code:
    <meta name="viewport" content="width=1160"
    Alternativ kannst du evt. auch folgendes machen:
    PHP-Code:
    footer {
        
    width:1160px;


    Zur Erklärung: du hast in deinem <body> zwei Elemente, #wrapper und #footer. Die Breite des #wrapper ist fixiert mit 1160px (1140px width + 20px padding). die Breite des #footer jedoch nicht - die ist einfach 100% Breite des <body>, also des Viewports im Endeffekt. Da du keine Viewport Angabe gemacht hast, schätzt der Browser einfach selbst ein, welche Größe beim Viewport genommen werden soll. Chrome for Android wählt hier bspw. 980px. Somit wird der #footer nur 980px breit. Dann ist es aber so, dass dein #wrapper breiter ist als der Viewport - der Browser zoomed daher automatisch raus, damit der gesamte Content sichtbar ist. Auf die Breite der Elemente hat das zoomen aber keine Auswirkung - daher wird auch der #footer nicht breiter als 980px.

    Generell gilt: du solltest immer den richtigen Viewport setzen.
    Geändert von Spooky (20.07.2014 um 13:42 Uhr) Grund: fixed viewport

  5. #5
    Contao-Nutzer Avatar von pix
    Registriert seit
    23.06.2009.
    Beiträge
    110

    Standard

    Erstmal danke an alle für die Sonntags Hilfe.
    Ich habe den Viewport jetzt im Seitenlayout im <head> Bereich manuel nachgetragen. Soweit löst das mein Problem jedoch zeigt der Android Browser die Seite jetzt zu groß also nicht mehr zentriert an.
    Ich muss jetzt raus zoomen um die komplette Seite auf einem Blick zu sehen. Ich gebe zu ich habe das mit den "richtigen" Viewport noch nicht ganz verstanden. Es muss ja jetzt an die 1160px liegen die ich im Vieport angegeben habe. Gibt es da ein Beispiel zu nachlesen.

  6. #6
    Community-Moderator
    Wandelndes Contao-Lexikon
    Avatar von Spooky
    Registriert seit
    12.04.2012.
    Ort
    Scotland
    Beiträge
    34.319
    Partner-ID
    10107

    Standard

    Entferne mal das , initial-scale=1, ich glaube da habe ich mich geirrt.

  7. #7
    Contao-Nutzer Avatar von pix
    Registriert seit
    23.06.2009.
    Beiträge
    110

    Standard

    Es geht Super. DANKE!

  8. #8
    Community-Moderator
    Wandelndes Contao-Lexikon
    Avatar von Spooky
    Registriert seit
    12.04.2012.
    Ort
    Scotland
    Beiträge
    34.319
    Partner-ID
    10107

    Standard

    Sehr gut. Hab das auch mal im ursprünglichen Post ausgebessert.

    Eine gute umfassende Dokumentation über den Viewport und alle Zusammenhänge kann ich dir leider auch nicht empfehlen.

Aktive Benutzer

Aktive Benutzer

Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)

Lesezeichen

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •