• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Frage <body> width nach meta viewport nicht 100%

Seyonne

Mitglied
Hallo zusammen,

Nach langer Zeit ohne HTML/CSS/PHP muss ich einiges auf den aktuellen Stand bringen.
Bezüglich Mobile Devices habe bei einer Testseite den meta viewport eingefügt.
<meta name="viewport" content="width=device-width; initial-scale=1.0;" />

Dadurch wird mir auf dem Handy der body nurnoch über die hälfte des Bildschirmes statt 100% angezeigt.
Die Navigationsleiste <div style="display: fixed;"><nav>.... jedoch über 100%.

Folgendes probiert:
- body{ width: 100% auto !important; }
- div über den gesamten Inhalt
div#widthTest{ width: 100% !important; }

Bitte um hilfe :|

Hier der Link
http://www.diroka.de/entwicklung/dropdowntest_navoben.php
 
Zuletzt bearbeitet:
Werbung:
Die Navigationsleiste <div style="display: fixed;"><nav>.... jedoch über 100%.
display:fixed gibt es nicht. Oder ist vllt. eher von position:fixed die Rede?

Mit welchem Smartphone-Modell/-Typ taucht denn das Problem auf?

Ist die Seite online, und für Dritte zugänglich, um einen Blick darauf werfen zu können?

Andernfalls das Ganze bitte mal auf https://jsfiddle.net demonstrieren.
 
Hallo,
danke vorab für die rasche Antwort.

ja, natürlich position: fixed :D
Samsung Galaxy S6 edge
link in Originalbeitrag hinzugefügt.
 
Werbung:
Beseitige mal den ausgegebenen PHP-Fehler im Footer, dessen Zeichenkette in der Fehlermeldung über die Layoutbreite hinausläuft, und schliesse am Dokumentende ordnungsgemäß alle geöffneten Tags (<html>, <body>, <div id="widthTest">, <footer> & <div class="foot">).

Desweiteren werden die weiteren Eigenschaften im <meta>-Tag nicht mit einem Semikolon, sondern komma-separiert aufgelistet.
HTML:
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
Zuletzt bearbeitet:
Das unauffindbare file.... wäre ich so schnell nicht drauf gekommen :D
Alle Elemente sind geschlossen.
Dennoch am Smartphone noch nicht 100% in Portrait! Landscape wird korrekt angezeigt.
 
Dann würde ich mal das CSS nach weiteren Fehlern und/oder Ungereimtheiten durchsuchen, denn zum Beispiel float:center gibt es auch nicht.

Gut möglich, dass sich unter den knapp 690 Zeilen eine Regel befindet, die die Ursache dafür ist.
 
Zuletzt bearbeitet:
Werbung:
Man mag es ja nicht glauben, aber die Ursache findet sich im HTML-Code mit den auskommentierten Überbleibseln aus alten Tagen :cool:

Mit diesem "bereinigten" Code ist das Problem aus der Welt geschaffen (lokal getestet mit Samsung Galaxy Note Edge):
HTML:
<div id="widthTest">
<div class="navtest">
   <div class="test">
       <img id="logo" src="../pics/logo_small_ye2.png" alt="Diroka Logo">
   </div>
  <nav>
     <ul>
       <li id="logo"></li>
  <li class="navToggle"><a href="#">Startseite</a></li>
  <li class="navToggle"><a href="#">Über Uns</a></li>
  <li class="navToggle">
  <a href="#">Leistungen <span class="toggle">Expand</span><span class="caret"></span></a>
  <nav id="dropdown">
  <ul>
  <li><a href="#">Rohrreinigung</a></li>
  <li><a href="#">Kanalreinigung</a></li>
  <li><a href="#">Rohrsanierung</a></li>
  <li id="tv"><a href="#">TV-Kamera-</br>untersuchung</a></li>
             <li><a href="#">Bilder</a></li>
  </ul>
  </nav>
  </li>
  <li class="navToggle"><a href="#">Impressum</a></li>
       <li id="navToggle"><a href="#">Menü <span class="toggle">Expand</span><span class="caret"></span></a>
         <nav id="dropdown">
  <ul>
  <li><a href="#">Rohrreinigung</a></li>
  <li><a href="#">Kanalreinigung</a></li>
  <li><a href="#">Rohrsanierung</a></li>
  <li id="tv"><a href="#">TV-Kamera-</br>untersuchung</a></li>
             <li><a href="#">Bilder</a></li>
  </ul>
  </nav>
       </li>
  </ul>
   </nav>
</div>
<div class="space">&nbsp;</div>
<header>
   <div class="marquee">
     <marquee id="title"><img src="../pics/24htel.png" id="marq_tel" alt="24Stunden Notdienst 0172/6734746"></marquee>
   </div>
   <figure>
     <img id="title" src="../pics/Christopher/CW_mini.png" itemprop="logo" alt="Dienstleitungen Rohr- und Kanalservice - Christopher Wawrzyn">
     <figcaption class="figheader"><h1>Dienstleistungen Rohr- und Kanalservice - Christopher Wawrzyn - 06351/121792</h1></figcaption>
   </figure>
</header>
<main role="main">
   <div class="flexboxcontainer">
     <div id="flexframe">
       <section id="motto">
         <ul>
           <li>         
             <article class="article_content" id="motto">Ob Großkunde oder Privatperson, ob Abflussnotdienst, Generalinspektion oder Dichtheitsprüfung, getreu dem Motto - sauber, günstig, schnell - sind wir rund um die Uhr, sieben Tage die Woche für Sie erreichbar.</article>
           </li>
         </ul>
       </section>
       <section id="flex">
         <ul>
           <li>
             <article class="article_topic"><h3>Rohr- und Kanalreinigung</h3></article>
             <article class="article_content">
               <img class="arbeitsbilder" src="../pics/arbeit/reinigung.jpg" alt="Arbeitsbeispiel Rohrreinigung">
               Ihr Abfluss ist verstopft, das Wasser läuft schlecht ab oder geht gar nichts mehr? Kein Problem! Wir sind rund um die Uhr, sieben Tage die Woche für Sie da. Je nach Ursache und Lage der Verstopfung kommen verschiedene Reinigungsverfahren zum Einsatz.
               <br /><a href="self">Erfahren Sie mehr!</a>
             </article>
           </li>
           <li>
             <article class="article_topic"><h3>Rohrsanierung</h3></article>
             <article class="article_content">
               <img class="arbeitsbilder" src="../pics/arbeit/rohr.jpg" alt="Arbeitsbeispiel Rohrsanierung">
               Bei Wurzeleinwüchsen, Rissen und Brüchen in der Abwasserleitung sollten diese saniert werden. Dabei muss man nicht immer die Wand aufstemmen, oder den Boden ausgraben und das Rohr bzw. den Kanal erneuern. Wir bieten verschiedene Sanierungsverfahren an.
               <br /><a href="self">Erfahren Sie mehr!</a>
             </article>
           </li>
           <li>
             <article class="article_topic"><h3>TV-Kamerauntersuchung</h3></article>
             <article class="article_content">
               <img class="arbeitsbilder" src="../pics/arbeit/Muffe.jpg" alt="Arbeitsbeispiel Kamerauntersuchung">
               Ihr Abfluss ist desöfteren Verstopft? Oder Sie haben nasse Wände im Keller, und wissen nicht wo die Ursache liegt? Wir finden nicht nur die Lösung zur Behebung ihres Problems, wir finden auch die Ursache.
               <br /><a href="self">Erfahren Sie mehr!</a>
             </article>
           </li>
         </ul>
       </section>
     </div>
   </div>
</main>
<footer>
     <div class="foot">
       <br />
       &copy; Christopher Wawrzyn, 2015
  </div>
</footer>
</div>
 
Ohweh...
Wie kann auskommentierter Code denn Auswirkungen haben? Zukünftig wohl reinlicher arbeiten...
Vielen Dank! Werde morgen mal drüber gehen :D
 
Werbung:
Hallo,

Den Fehler habe ich nun tatsächlich doch im CSS gefunden.
img#title { min-width: 380px; }
nun nurnoch unter:
@media all and (min-width: 1024px)
und alles passt.

Vielen Dank führ die Hilfe!
 
Zurück
Oben