nicht angemeldet
Responsive Webseite wird auf Mobilgeräten nicht angepasst
Gunnar Bittersmann
oxo888oxo
TabellenkalkHallo,
nachdem ich bisher mit Anleitungen und Beispielen sehr weit gekommen bin mit meinem Webprojekt, stehe ich momentan vor einem Problem das ich nicht ganz erfassen kann. Ich habe die Webseite als eine responsive Webseite entwickelt, stehe nun jedoch vor dem Problem dass das Ganze auf dem Handy trotzdem ähnlich wie auf dem Desktop dargestellt wird. Während der Entwicklung habe ich hauptsächlich auf die Tools im Firefox zurückgegriffen und dort die Bildschirmgröße verkleinert, was auch alles ohne Probleme so geklappt hat wie ich es mir vorgestellt habe. Mir ist natürlich klar dass es einen Unterschied macht, was Firefox mir für eine Smartphoneauflösung anzeigt und was das Smartphone selbst anzeigt, aber ich habe nicht erwartet dass es überhaupt nicht funktioniert.
Also zuerst einmal ein Link zu der Seite, an der ich bastle.
Das Problem ist nun, dass die Media Queries auf den (getesteten) Mobilgeräten nicht greifen und das Layout dasselbe wie auf dem Desktop ist. Ich habe mehrere Brüche bei 890px, 600px und 475px eingeführt, aber bis auf die Schriftgröße ändert sich nichts auf den Mobilgeräten im Vergleich zum Desktop.
Hier zwei Ausschnitte aus dem HTML- und CSS-Code, der komplette Code passt hier nicht rein, kann aber über den obigen Link angezeigt werden:
<head>
<title>Websitetitel</title>
<meta charset="UTF-8" />
<meta name="language" content="de" />
<meta name="viewpoint" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Dieser Text wird bei dem Suchergebnis angezeigt und auf 250 Zeichen gekürzt" />
<meta name="keywords" content="Stichwörter, die, bevorzugt, angezeigt, werden" />
<meta name="revisit-after" content="7 days" />
<meta name="robots" content="noindex, nofollow, noarchive" />
<meta name="page-topic" content="Dienstleistungen" />
<meta name="geo.region" content="DE-NW" />
<meta name="geo.placename" content="Königswinter" />
<meta name="geo.position" content="50.7;7.2" />
<meta name="ICBM" content="50.7, 7.2" />
<link rel="stylesheet" href="style.css" type="text/css" media="all">
<link rel="icon" href="favicon.ico" type="image/vnd.microsoft.icon">
</head>
/*=============================================================
========================Mobile================================*/
@media all and (max-width: 890px)
{
header
{
width: auto;
}
#logo
{
text-align:center;
min-width: 476px;
max-width: 565px;
}
#imgcoral
{
margin: 0;
}
#slogan
{
top: 30px;
right: 43px;
font-size: 0.95em;
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
#deco
{
display: block;
box-shadow: 0px 0px 5px #888;
}
#toggle
{
display: block;
position: sticky;
top: 6px;
margin: -63px 0 0 6px;
z-index: 10;
cursor: pointer;
}
#menu
{
position: fixed;
top: 0px;
height: 100%;
padding: 0.75em;
text-align: left;
z-index: 10;
}
nav ul
{
height: auto;
padding: 0.75em 0.75em 0.125em 0.75em;
}
nav ul li
{
display: block;
margin-bottom: 0.625em;
}
nav ul li a
{
display: block;
padding: 0 0.75em;
}
#line
{
display: none;
}
#checkbox:not(:checked) + .wrap nav
{
left: -14.75em;
transition: .3s;
}
#checkbox:not(:checked) + .wrap #toggle
{
left: 0.375em;
transition: .3s;
}
#checkbox:not(:checked) + .wrap #main
{
padding-left: 0;
transition: .3s;
}
#checkbox:not(:checked) + .wrap header
{
margin-left: 0;
transition: .3s;
}
#checkbox:not(:checked) + .wrap footer
{
margin-left: 0;
transition: .3s
}
#checkbox:checked + .wrap nav
{
left: 0;
transition: .6s;
}
#checkbox:checked + .wrap #toggle
{
margin-left: 15.125em;
transition: .6s;
}
#checkbox:checked + .wrap #main
{
padding-left: 14.75em;
transition: .6s;
}
#checkbox:checked + .wrap header
{
margin-left: 14.75em;
transition: .6s;
}
#checkbox:checked + .wrap footer
{
margin-left: 14.75em;
transition: .6s
}
#main
{
width: 35.3125em;
}
article
{
width: 90.6%;
margin: 0 auto 1.25em auto;
padding: 4.7%;
}
aside
{
display: block;
width: 100%;
margin: 0 auto;
}
aside section
{
width: 90.6%;
padding: 4.7%;
}
footer ul
{
max-width: 35.3125em;
margin: 0 auto;
}
#footerwrap
{
padding: 0.75em 1.25em;
}
}
@media all and (max-width: 600px)
{
#main
{
width: 100%;
margin: 0 auto 5.5em auto;
}
#main article
{
width: 94%;
margin: 1.25em 0 0 0;
padding: 3%;
}
#main aside section
{
width: auto;
margin: 1.25em;
padding: 1.25em;
}
}
@media all and (max-width: 475px)
{
#logo
{
margin-top: -15px;
min-width: 261px;
}
#imgburrel
{
display: block;
margin: -90px auto 0 auto;
}
#slogan
{
top: 240px;
left: 0;
right: 0;
margin: 0 auto;
}
td
{
display: block;
width: 100%;
padding: 1em 0;
}
}
Ich habe schon etliche Versuche durchgeführt und intensive Googlerecherche betrieben, aber nichts hat geholfen. Vermutlich ist es nur ein Detail, warum das ganze nicht greift, aber ich bin im Moment echt aufgeschmissen...
Ich hoffe dass Ihr mir hier weiterhelfen könnt, ich danke schon vielmals im Voraus!
Herzliche Grüße
PS: es sind einige Details eingebaut, so zum Beispiel dass Mobile Menu, das rein auf CSS basiert etc., also nicht wundern :)
akzeptierte Antworten
Responsive Webseite wird auf Mobilgeräten nicht angepasst
Bewertung: keine Bewertung
-
Hallo aventurin!
Nicht, dass ich qualifiziert wäre, dir hier weiterhelfen zu können, aber hast du mal an mobile first gedacht, also die Reihenfolge zu ändern und dann mit
@media (min-width: xyz)die Übergänge zu setzen?Wäre nur 'ne Idee...
Gruß,
var
-
Hallo aventurin!
Nicht, dass ich qualifiziert wäre, dir hier weiterhelfen zu können, aber hast du mal an mobile first gedacht, also die Reihenfolge zu ändern und dann mit
@media (min-width: xyz)die Übergänge zu setzen?Wäre nur 'ne Idee...
Gruß,
var
Jeder ist qualifiziert und ich denke du bist besser qualifiziert als ich :) Aufgrund meiner Struktur bin ich letztenlich doch bei "Desktop First" geblieben, und als ich es mal mit Mobile First probiert habe, hat es auch nichts geändert, denn wie Jörg Reinholz ja festgestellt hat liegt der Fehler in der HTML-Datei :)
Trotzdem vielen Dank für deinen Hinweis!
-
-
Moin!
<meta name="viewpoint" content="width=device-width, initial-scale=1.0">Sieht aus wie ein "Typo". Versuchs mal mit "viewport".
Jörg Reinholz
-
Tja es ist doch schon immer wieder erstaunlich was man sich schön und richtig reden kann :) Ein ganz großes Dankeschön für den kleinen Hinweis, es geht doch nichts über ein paar Augen das den Code zum ersten mal liest! Merkwürdig nur dass der W3C-Validator nicht gemeckert hat, aber hauptsache das Problem ist gelöst!
Dankeschön!
-
-
@@aventurin
<meta name="language" content="de" />
Die
meta-Angabe interessiert niemanden.Die Sprache musst du mit
lang-Attribut imhtml-Element angeben:<html lang="de">LLAP 🖖
--
„Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)-
ok vielen Dank für den Hinweis, werde ich sofort noch einbauen :)
Herzliche Grüße
-
-
Also bei mir auf dem Handy klappt es mit dem mobilen Design. Ich habe ein Lumina 630 mit Windows Phone 8.1.
-
Hallo,
Also bei mir auf dem Handy klappt es mit dem mobilen Design. Ich habe ein Lumina 630 mit Windows Phone 8.1.
Dass der Fehler bereits gestern um 18 Uhr gefunden und bereits behoben ist und dies auch mit der akzeptierten Antwort dokumentiert ist, ist dir nicht aufgefallen?
Gruß
Kalk
-