Viewport für mobile Anzeige

[jgk]

Guten Tag,

ich habe ein Problem mit dem Viewport.
Nun habe ich den Metatag hinzugefügt, der wie folgt aussieht:

<meta name="viewport" content="width=device-width">

Im CSS ist nichts weiter definiert, aber auf der eigentlichen Seite der genannte Zusatz.

Dieser ermöglicht, dass die PX-Angaben der CSS nicht stören, und dennoch auf die Fenstergröße gezogen wird.
Für Opera, Chrome, Safari, Edge der mobilen Androidversion ist alles gut und die Webseite wie gewollt auf Fenstergröße.

Alleine Firefox will das nicht annehmen, und zeigt eine viel zu große Webseite, die irgendwo im nirgendwo endet, nur nicht im Fenster.
Ich kann hier auch nicht durch manuelles Zoomen auf Fenstergröße verkleinern.

Hat jemand eine Idee, was Firefox fehlt um das zu akzeptieren?

Im Übrgien habe ich schon versucht im CSS folgendes aufzunehmen

@viewport {
max-width: device-width;
}

und die device-width wurde bereits ausgtauscht durch "Auto" bzw. "100%" - probeweise. Es will aber nicht klappen mit der Fenstergröße, sodass ich hier um Hilfe bitte.

WEiß jemand um dieses Problem?

Mit freundlichem Gruß
Jan

 

[Sailor]

Hast du mit mit 'initial-scale=1' probiert?
<meta name=viewport content="width=device-width, initial-scale=1">

 

[jgk]

Ja, wenn ich diese Funktion mitaufnehme, dann zeigt kein einziger mobiler Browser mehr auf Displaybreite so wie Mozilla.

Ich würde meinen, dass liegt an einer Korrelation zwischen den Pixelangaben im CSS und der width: device-width Vorgabe.

Ich denke hier gibt es eher ein Prioritätenproblem als fehlerfreien Code, dass glücklicherweise mit device-width gelöst wird(Opera, Chrome, Safari, Edge) und nur Mozilla scheint die device-width nicht anzuerkennen, sondern nimmt weiterhin die px aus dem CSS.

Wenn ich initial-scale=1 hinzufüge, dann sorge ich bei allen Browsern dafür, dass device width nicht genommen wird, sondern wohl die px Angabe aus body html und anderen Definitionen.

Es reicht hier also, Mozilla wie die anderen zur Anerkennung der device-width aus der meta viewport Definition zu bringen, man muss ihm beibringen, nicht weiterhin die PX aus CSS zu nehmen.

Nur wie?

Netten Gruß
Kasnitz

 

[Sailor]

Poste doch einen Link zur Seite... Rätselraten mag hier keiner so wirklich.

 

[jgk]

www.walsum-consulting.de

CSS

/* ==================================================== GLOBAL DEFINITION ==================================================== */
@viewport {
max-width: device-width;
}
@font-face {
font-family: 'Tauri';
font-style: normal;
font-weight: 400;
src: local('Tauri Regular'), local('Tauri-Regular'), url(http://themes.googleusercontent.com/static/fonts/tauri/v2/33NkxyDp8MBgQpwno_A-zw.woff) format('woff');
}
* {
margin: 0;
padding: 0;
}
html {
padding: 0px 2%;
}
body {
width: 950px;
margin: 0 auto;
font: normal .75em Arial, sans-serif;
color: #474747;
background: #ffffff;
}
h9 {
position:absolute;
left:-10000px;
top:auto;
width:1px;
height:1px;
overflow:hidden;
}
a {
color:#843953;
font-weight: bold;
}
a:hover, a:focus {
color: #8F8F90;
}
a.more {
float: right;
}
a.more:after {
content: " >";
display: inline-block;
height: 1em;
padding: 0 .5em 0.5em 0.5em;
border-radius: 1em;
background: #ffa323;
margin-left: 10px;
}
footer a {
color: #989898;
}
a.more:hover, footer a:hover {
color: #4A4A4A;
text-decoration: none;
}
p {
line-height: 1.6em;
margin: 20px 0;
}
h1 {
font: bold 1.875em Tauri, serif;
color:#EC8144;
}
h2 {
font-size: 1.875em;
font-weight: normal;
color: #7C2D48;
padding: 10px 5px;
border-bottom: 1px solid #BBBCBE;
}
h5 {
font-size: 1.875em;
font-weight: normal;
color: #7C2D48;
padding: 10px 5px;
border-bottom: 1px solid #BBBCBE;
}
h4 {
font-size: 1.875em;
font-weight: normal;
color: #7C2D48;
padding: 10px 5px;
}
h7 {
font-size: 1em;
font-weight: normal;
color: #7C2D48;
padding: 10px 5px;
border-bottom: 1px solid #BBBCBE;
}
h6 {
font-size: 1.875em;
font-weight: normal;
color: #7C2D48;
padding: 10px 5px;
border-bottom: 1px solid #BBBCBE;
}
h2.img {
padding-left: 40px;
background: left center no-repeat scroll;
}
.img.about {
background-image: url('../img/icon-about.png')
}
.img.cash {
background-image: url('../img/icon-cash.png')
}
.img.group {
background-image: url('../img/icon-group.png')
}
.img.phone {
background-image: url('../img/phone.png')
}
.img.letter {
background-image: url('../img/letter.png')
}
.img.place {
background-image: url('../img/place.png')
}
h3 {
font: normal 1.10em Tauri, serif;
color: #7C2D48;
margin: 20px 0;
}
h8 {
font-size: 1.875em;
font-weight: normal;
color: #FDFEFE;
padding: 10px 5px;
border-bottom: 1px solid #F7FCF9;
}
h7 {
color: #7C2D48;
}
img, a img {
border: 0 none;
}
ul.bullets {
margin: 30px 0 0 13px;
color: #FFA128;
}
ul.bullets li {
width: 100%;
font-size: 1.10em;
font-weight: bold;
padding-left: 5px;
line-height: 2.0em;
color: #FFA128;
}
ul.bullets li span {
color: #474747;
padding-left: 5px;
}

dl {
margin-bottom: 50px;
clear: left;
}
dt {
float: left;
font-weight: bold;
margin-right: 5px;
padding: 5px;
width: 90px;
}
dd {
margin: 2px 0;
padding: 5px 0;
}
/* ==================================================== HEADER ==================================================== */
header {
width: 100%;
height: 240px;
background: url('../img/header.png') no-repeat center bottom #e7e8ee;
background-size: contain; border: 1px solid #E5E7EB;
}
#logo {
float: left;
margin: 20px 0 0 30px;
padding: 10px;
background: url('../img/eng.png') no-repeat left;
text-decoration: none;
}
#navlink {
display:none;
float: right;
text-decoration: none;
font-size: 0.875em;
font-weight: bold;
padding: 10px;
margin: 20px 30px 0 0;
}
/* ==================================================== Kontakt ==================================================== */
form {
background-color: #eee;
width: 550px; /* Breite des Formulars */
padding: 20px;
border: 1px solid #8c8c8c;
}
label { /* Beschriftung auf eigener Zeile */
display: block;
cursor: pointer; /* Mauszeiger wird zur Hand */
}
input#absender,
textarea {
width: 300px;
border: 1px solid #8c8c8c;
margin-bottom: 1em;
}
input#name,
textarea {
width: 300px;
border: 1px solid #8c8c8c;
margin-bottom: 1em;
}
input#telefonnummer,
textarea {
width: 300px;
border: 1px solid #8c8c8c;
margin-bottom: 1em;
}
input#firma,
textarea {
width: 300px;
border: 1px solid #8c8c8c;
margin-bottom: 1em;
}
input#firmensitz,
textarea {
width: 300px;
border: 1px solid #8c8c8c;
margin-bottom: 1em;
}
input#betreff,
textarea {
width: 300px;
border: 1px solid #8c8c8c;
margin-bottom: 1em;
}
textarea {
width: 545px;
height: 25em;
}
input:focus,
textarea:focus {
background-color: #d9d9d9;
}
textarea { resize: vertical; }
/* ==================================================== CONTENT ==================================================== */
main {
display: block;
position: relative;
width: 100%
}
article {
float: left;
background: #FAFBFC;
border: 1px #E5E7EB solid;
margin-top: 70px;
width: 96%;
padding: 20px 2%;
}
section {
float: left;
width: 74%;
}
section.spalte {
float: left;
width:33%;
padding:20px 2%;
min-height: 220px;
}
section.spalte h2 {
border-bottom: 0 none;
}
main .news-1 {
background: url('../img/phone.png') no-repeat right #EEEEEE;
}
main .news-2 {
background: no-repeat right #EEEEEE;
padding: 30px 30px 0px 5px;
}
aside {
float: right;
width: 23%;
}
aside ul {
line-height: 1.6em;
list-style: none outside none;
padding: 1em 0 1em 5px;
clear: left;
}
aside p {
margin-bottom: 50px;
}
aside p:last-child {
margin-bottom: 20px;
}
/* ==================================================== NAV ==================================================== */
nav {
float: left;
width: 100%;
list-style-type: none;
box-shadow: 0 10px 5px 0 rgba(0,0,0,0.75);
position: absolute;
top: -11px; left:0%;
display: block;
text-align: center;
margin: 0 auto 30px;
}
nav ul {
float: left;
width: 100%;
list-style-type: none;
background: #7C2D48;
}
nav ul li {
float: center;
}
nav ul li:first-child {
margin-left: 27%;
}
nav ul li:last-child {
margin-right: 0%;
}
nav ul li a {
float: left;
padding: 16px 0 16px 16px;
color: #FFFFFF;
text-decoration: none;
}

nav li a {
text-shadow: 1px 1px 1px #6D273F;
}

/* ==================================================== FOOTER ==================================================== */
footer {
float: left;
width: 100%;
margin: 10px 0 40px 0;
color: #989898
}
footer ul {
float: left;
margin-left: 22px;
list-style-type: none;
}
footer ul li {
display: inline-block;
border-left: 1px solid #989898;
}
footer ul li:first-child {
border: 0 none;
}
footer ul li a {
padding: 0 8px;
}
footer p {
float: right;
margin-right: 0px;
margin-top: 0;
padding-top: 0;
text-align: right;
}


<h2 class="img about">Über uns</h2>
<p>Wir sind Experten für ihr Anliegen und stellen uns den Anspruch Lösungen für höchste Anforderungen zu liefern.
Aktuelle wissenschaftliche Methoden sowie Fachexpertise sind dabei Werkzeug.
</p>
<h2 class="img cash">Mehrwert</h2>
<p>Wir setzen Trend, erobern Märkte, Länder und Kunden. Dabei steht der Mensch im Mittelpunkt allen Handelns und ist der Ausganspunkt von Gedanken. Unsere Arbeit ist streng strategisch ausgerichtet - mit einem Blick weit in die Zukunft werden wir ihr Unternehmen ausrichten.
<br>
</p>
<h2 class="img group">Teamarbeit</h2>
<p>Teamarbeit führt Standpunkte zusammen. Wir setzen nicht nur intern auf die Arbeit in Teams, sondern auch während der Arbeit beim Kunden.<br>
</p>
</aside>


</article>
<h9> Strategie, rechtsberatung, Wirtschaftsrecht, Rechtsanwalt, Energierecht, Wettbewerbsrecht, Arbeitsrecht, Markenrecht, Patentrecht,
Reorganisation, Consulting, </h9>
<nav id="navigation">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="leistungen.html">Leistung</a></li>
<li><a href="ansich.html">Unternehmen</a></li>

<li><a href="karriere.html">Karriere</a></li>
<li><a href="kontakt.html">Kontakt</a></li>
<li><a href="impressum.html">Impressum</a></li>
</ul>
</nav>
</main>
<footer>
<a href="datenschutz.html">Datenschutz</a>
<p id="copyright">
<b> technische Umsetzung und Copyright 2017: Jan-Gabriel Kasnitz</b></a>
</p>
</footer>
</body>
</html>

 

[jgk]

und index als Referenz auch für andere Seiten

<!doctype HTML>
<html lang="de">
<head>
<meta charset="utf-8">
<!--[if lte IE 8]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<meta name="viewport" content="width=device-width;">
<meta name="keywords" content="
Reorganisation, Unternehmensberatung, Consulting, Wirtschaftsprüfung, Beratung, Fabrikplanung, Anlagenplanung, Prozessoptimierung,Kennzahlen, Prozesskontrolle, Prozessplanung, Produktionstechnik, Überwachungstechnik, Informationstechnik,
Kommunikationstechnik, Teamarbeit, Beschwerdemanagement, Qualitätsmanagement, Balanced Scorecard, Strukturoptimierung,
Strategie, Visionen, Berlin, Münster, Bonn, Koblenz, München,
Hannover, Bocholt, Duisburg, Dortmund, Essen, Bochum, Mühlheim,
Hamburg, Köln, Frankfurt, Stuttgart, Düsseldorf, Leipzig, Bremen, Dresden, Nürnberg, Wuppertal, Bielefeld,
Bonn, Münster, Karlsruhe, Mannheim, Augsburg, Wiesbaden, Gelsenkirchen,
Mönchengladbach, Braunschweig, Chemnitz, Kiel, Aachen, Halle, Magdeburg,
Freiburg, Krefeld, Lübeck, Oberhausen, Erfurt, Mainz, Rostock, Kassel, Hagen,
Hamm, Saarbrücken, Mühlheim, Potsdam, Ludwigshafen, Oldenburg, Leverkusen, Osnabrück, Solingen, Heidelberg
Herne, Neuss, Darmstadt, Paderborn, Regensburg, Ingolstadt, Würzburg, Fürth,
Wolfsburg, Offenbach, Ulm, Heilbronn, Pforzheim, Göttingen, Bottrop, Trier, Recklinghausen, Reutlingen,
Bremerhaven, Koblenz, Bergisch Gladbach, Jena, Remscheid, Erlangen, Moers,
Siegen, Hildesheim, Salzgitter,Markenimplementierung, Handlungsrichtlinien, Wissensmanagement, Management, Rechnerintegration, Rechtsberatung, Wirtschaftsrecht, Arbeitsrecht, Wettbewerbsrecht, Consulting,
">
<meta name="description" content="Wirtschaftsrecht, Strategie, Administration & Technologie sind unsere Stärke.">
<link href="css/style.css" rel="stylesheet">
<title>Unternehmensberatung - Ihr Anliegen ist unser Erfolg: Home</title>
</head>
<body>
<header>
<a id="logo" title="English" href="/eng/index.html"</a>
<a id="navlink" title="zum Navigationsmenü" href="#navigation">Menü</a>
</header>
<!-- CONTENT -->
<main role="main">
<article>
<section>
<h1>Herzlich Willkommen</h1>
<p>
Wir begrüßen Sie bei unserer Internetpräsenz. Sie bekommen hier einen Eindruck von Tätigkeitsgebieten, die nicht nur auf produzierendes Gewerbe, sondern auch auf Dienstleistungen und Verwaltungen ausgerichtet sind.
<p></p>
<ul>
<li>Operational Excellence (Strategie, Administration und Produktion)</li>
<li>Digitale Lösungen (Software, Hardware, Programmierung)</li>
<li>Maschinenbau und Produktionstechnik</li>
<li>Energietechnik</li>
<li>Verwaltungsunterstützung (technisch, politisch, organisatorisch)</li>
<li>Rechtsberatung (Wirtschaftsrecht aller Bereiche bis hin zum Forderungsmanagement)</li>
<li>Projektmanagement</li>
</ul>
<p></p>
Wir arbeiten für große Konzerne aber auch kleinere Unternehmen sowie für Praxen, Büros, Agrarbetrieb und Gesundheitswesen.
Praktisch gesehen sind wir ein Allrounder für jede Branche und alle Anliegen und zwar nicht aus Kundenakquise heraus, sondern wegen Können und Wissen.
<p></p>
<img src="img/mb.jpg" alt="Produktionstechnik Foto" height="366" width="569">
<p></p>
</section>
<aside>

 

[Sailor]

Versuche mal folgendes:
body {
width: 100%;
max-width: 950px;
}

 

[jgk]

Das mögen die Browser anscheinend überhaupt nicht. Auf dem Rechner wird auf 100% gezogen und zwar immer noch über dei 950px hinaus. Auf den mobilen Browsern ist der ganze Inhalt übereinander geschoben und unleserlich, hier kommt es auch nicht an....

Habe schon daran gedacht es zu belasse, weil es eben nur der mobile Firefoxbrowser war und sonst alle anderen problemlos anzeigen.

Aber vielleicht fällt Ihnen noch was ein oder mir. Ich werde auch noch mals an Ideenfindung gehen....

Erinnerlich gab es irgendwo im Bezug auf mediaqueries und viewport speziell für firefox angepasste Befehle, nur ich finde die Seite nicht mehr, vielleicht versteckt sich dahinter die Abweichung in der Anzeige von anderen Browsers.....

 

[jgk]

Habe nochmals versucht beide Zeilen zu spezifizieren mit auto mit Tausch und mit max device-width. Geht beides nicht. Ich bin gerade drauf und dran, dem user zu überlassen zumindest bei Firefox seitlich zu scrollen.

Ich Überlege gerade, ob ich die Homepage nicht doch responiv darstellen lasse, damit man nicht hin und herzuscrollen hat für Artikel und Informationen.

Wobei hier ellen lange Seiten zu Stande kommen.

Ich denke es ist Hops wie gesprungen. Vielleicht lasse ich es einfach so

 

[Sailor]

Das mit den 'speziellen' FireFox Befehlen ist nicht richtig... in der aktuellen Version kommt FireFox ohne diese 'web-kit' Geschichten aus. Die werden eigentlich nur für Safari und ältere MS Explorer Versionen gebraucht... wenn überhaupt.
Die Hauptursache für deine Probleme sehe ich eher am Code deiner Seite, der ist nämlich nicht responsive und passt sich deswegen auch nicht an unterschiedliche Displaybreiten an. Daher die Überschneidungen und auch sonst noch so einige unschöne Erscheinungen.
.. ach ja... als erstes solltest du mal den Link in deinem Header richtig machen. Da steht jetzt
<a id="logo" title="English" href="/eng/index.html"</a>
richtig wäre aber:
<a id="logo" title="English" href="/eng/index.html"></a>
Dann solltest du ... auch wenn dir das vielleicht gehoppst wie gesprungen erscheint... deine Seite auf responsive umstellen.
Das könnte dann so aussehen.

body {
  width: 100%;
  max-width: 950px;
}
article {
  display: flex;
}
aside {
  min-width: 180px;
}
article section img {
  width: 99%;
  max-width: 569px;
  height: unset;
}
@media screen and (max-width: 980px) {
  header {
    height: calc(100vw / 4.15)
  }
  #logo {
    margin: 1.4vw 0 0 2.9vw;
  }
  section {
    padding-right: 8px;
  }
}
@media screen and (max-width: 760px) {
  #logo {
    margin: 0.4vw 0 0 2.5vw;
  }
  
}
@media screen and (max-width: 460px) {
  article {
    flex-direction: column;
  }
  section, aside {
    width: 100%;
  }
}

Ist jetzt nur ein schneller und bestimmt nicht idealer Entwurf - aber vielleicht hilft dir das ja weiter.