@media queries funktionieren nicht

XFgn

Hallo,

Mein Problem, wie der Titel sagt, ist folgendes:↓
Ich musste einen Teil meiner Seite neu designen, habe das gemacht,
und mir fehlen jetzt aber @media queries, da das Design nicht für
Handys und Konsolen passt. Da die gleiche Seite aber über Konsole und
Handy besuchbar sein muss, wollte ich eben erstmal mit dem Handy, und
meinen eigenen Handy meinen Viewport von 360px nutzen.
Nachdem ich alls eingetragen habe, und ich die ersten ID's eingetragen habe,
deren Größen für den zugeschrieben Viewport, etc., habe ich beim Aktualisieren
feststellen müssen, dass @media nur in sofern funktioniert hat, dass
die ID im normalen CSS komplett ignoriert wurde, aber die aus
dem @media screen... benutzt wurde. Die @media hat dann also sas Design für alle
Geräte geändert/komplett das Design der Seite, und nicht nur für den Viewport.

@media screen and (min-width: 360px) {
#Jet{
width: 50px;
float: right;
}
Das ist nur 1 ID, die als 1. die hineinbearbeitet wurde.
Da fehlen noch so einige. So ist allerdings mein @media querie aufgebaut.

So sah es dann erstmal grob aus. Die ID für ein Bild, und dessen Größe wegen des Viewports.
Anstatt dass diese aber wie gesagt für diesen Viewport einfach nur funktioniert, wurde hier
gleich das Bild für alle Viewports geändert. Und mein PC, wie die Xbox haben einen Viewport
von über 1000. Zwar nicht den gleichen, aber drüber. Ein Samsung Galaxy S4 hingegen nur 360px.

Und jetzt noch 2 verschiedene HTML Dokumente neu anzufertigen für beide Systeme
wäre viel zu Zeitaufwendig. Nicht dass ich die Zeit nicht hätte, aber wenn ein mal was
geändert werden muss, muss ich gleich 3 verschiedene HTML Dokumente öffnen,
und da alles unnötig oft bearbeiten. Bei @media queries hingegen bleibt es nur
1 Dokument.

Hoffe mir kann da i-wer weiter helfen.
Danke schonmal an alle die sich das durchlesen und/oder antworten.

PS: Den kompletten Code bearbeite ich nach, oder schreibe den in eine Antwort.

HTML

<!DOCTYPE html><html lang="de"><head>  <link rel="icon" type="image/png" href="SEK116fs.png" sizes="16x16">  <link rel="icon" type="image/png" href="SEK1pngfs.png" sizes="32x32">  <link rel="icon" type="image/x-icon" href="favicon.ico" >  <link rel="shortcut icon" type="image/x-icon" href="favicon.ico"/>  <title>xForigens GTA Online | SEK1</title><style>html, body {    background-color: #e1e1e1;    margin-top: 0;    margin-bottom: 0;    margin-left: 0;    margin-right: 0;    padding: 0;}body {    font-family: "Comic Sans MS"}#header_container {    position: fixed;    width: 100%;    height: 60px;    overflow: hidden;    z-index: 1;    background-image: linear-gradient(90deg, #1f1f1f 80%, #dcdcdc 100%);    padding: 0;    margin-top: 0;    margin-bottom: 0;    margin-left: 0;    margin-right: 0;    border-bottom: 3px solid #696969;}#header {    margin: 0;    width: 100%;    background-image: linear-gradient(90deg, #1f1f1f 80%, #dcdcdc 100%);    overflow: hidden;}#header img {    float: left;}#header ul {    float: left;    margin: 17px 0 0 100px;    padding: 0;    overflow: hidden;    text-decoration: none;}#header li {    float: left;    margin-right: 30px;     list-style-type: none;    text-decoration: none;}#header li a {    display: block;    color: #FFFFFF;    text-align: center;    text-decoration: none;}#header li a:hover {    border-bottom: 3px solid #696969;}.container_content {    margin-left; 0px;    overflow: hidden;    padding-top: 60px;    wdith: 100%;}.MenuSEK {    width: 100%;    height: 405px;    background-color: #000000;    margin-top: 0;    overflow: hidden;    float: left;    padding: 0;}#ChangeLogPU {    background-color: #e1e1e1;    border: 3px solid #696969;    border-radius: 6px;    margin: 25%;    position: fixed;    z-index: 999;    opacity: 1.0;    width: 616px;    display: none;}#InfoBox {    height: 25px;    width: 25px;    border-radius: 50%;    background-color: red;    position: relative;    float: left;    border: 2px solid white;    margin-top: -2px;    margin-left: -2px;    transition: 1s;}#InfoContainer {    height: 25px;    width: 25px;    background-color: darkred;    border-radius: 25px;    position: absolute;    border: 2px solid white;    overflow: hidden;    transition: 1s;    float: left;}#InfoExp {    background-color: white;    margin-left: 30px;    margin-top: 2px;    width: 330px;    height: 20px;    float: left;    position: absolute;    border-radius: 12px;}/*-32*/#InfoContainer:hover {    width: 362px;}#popcover {    z-index: 998;    width: 100%;    height: 100%;    opacity: 0.7;    background-color: black;    position: fixed;    display: none;}.MenuSEKL {    width: 545px;    height: 405px;    float: left;    overflow: hidden;    position: relative;}.MenuSEKLinks {    margin-bottom: 0;    margin-top: 0;    float: left;    padding-top: 0;    padding: 0;    margin-left: 0;    margin-right: 0;}.HLink {    margin-left: 20px;    border-bottom: 2px solid #696969;    color: white;    float: left;    margin-right: 20px;    text-decoration: none;}#HierarchyFrame {    border: 0;    width: 100%;    height: 0px;    transition: 2s;    float: left;}.NLink {    border-bottom: 2px solid #696969;    color: white;    float: left;    margin-right: 20px;    text-decoration: none;}#NutzungsFrame {    border: 0;    width: 100%;    height: 0px;    transition: 2s;    float: left;}.VLink {    border-bottom: 2px solid #696969;    float: left;    color: white;    margin-right: 20px;    text-decoration: none;}#VerhaltensFrame {    border: 0;    width: 100%;    height: 0px;    transition: 2s;    float: left;}.ALink {    margin-right: 0;    border-bottom: 2px solid #696969;    float: left;    color: white;    margin-right: 20px;    text-decoration: none;}#AusrüstungsFrame {    border: 0;    width: 100%;    height: 0px;    transition: 2s;    float: left;}.content {    float: left;    width: 100%;    overflow: hidden;    position: relative;    padding: 0;    background-color: black;}.HauptInfo {    background-color: black;    padding: 20px;    width: 97%    transition: 2s;}#Titel {    color: white;    text-align: center;    transition: 2s;    float: left;    margin-top: 0;    width: 100%;}#ChangeLogButton {    color: white;    float: right;    margin-top: -40px;    margin-right: 20px;    background-color: black;    border: 2px solid white;    border-radius: 3px;}#InfoText {    text-align: center;    color: white;    transition: 2s;    margin-top: 70px;}#CT {    color: white;    text-align: center;}#CTtrenn {    transition: 2s;}#Termine table, td {    border: 1px solid black;    background-color: black;    color: white;    padding: 5px 10px 5px 10px;}.CloseTab {    color: white;    background-color: black;    border: 2px solid #696969;    float: right;    margin-top: 40px;    display: none;}.content iframe {    margin: auto;}#container_footer {    width: 100%;    height: 45px;    background-color: #1f1f1f;    padding: 0;    margin-bottom: 0;    margin-left: 0;    margin-right: 0;    border: 0;}#footer {    width: 100%;    height: 45px;    background-color: #1f1f1f;    border-top: 3px solid #696969;}#footer h2 {    color: #ffffff;    font-family: arial;    font-size: 12px;    text-align: right;    margin-right: 10px;    position: relative;    margin-top: 13px;    text-decoration: none;}#footer h2 a {    color: white;    text-decoration: none;}#Jet {    float: right;    height: 405px;    width: 720px;}@media screen and (min-width: 360px) {    #Jet {        width: 50px;        float: right;    }}</style></head><body><script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.1.1.min.js"></script><script>$(document).ready(function(){    $(".HLink").click(function(){        $(".HLink").css("border-bottom","2px solid red");        $("#HierarchyFrame").css("height","700px");        $("#NutzungsFrame").css("height","0px");        $(".NLink").css("border-bottom","2px solid #696969");        $(".VLink").css("border-bottom","2px solid #696969");        $("#VerhaltensFrame").css("height","0px");        $("#AusrüstungsFrame").css("height","0px");        $(".ALink").css("border-bottom","2px solid #696969");        $("#Titel").css("font-size","0px");        $("#InfoText").css("font-size","0px");        $("#CTtrenn").css("display","none");        $(".CloseTab").css("display","block");        $(".content").css("background-color","#e1e1e1");        $("#InfoText").css("margin-top","0px");    });});</script><script>$(document).ready(function(){    $(".NLink").click(function(){        $(".NLink").css("border-bottom","2px solid red");        $("#NutzungsFrame").css("height","625px");        $("#HierarchyFrame").css("height","0px");        $(".HLink").css("border-bottom","2px solid #696969");        $(".VLink").css("border-bottom","2px solid #696969");        $("#VerhaltensFrame").css("height","0px");        $("#AusrüstungsFrame").css("height","0px");        $(".ALink").css("border-bottom","2px solid #696969");        $("#Titel").css("font-size","0px");        $("#InfoText").css("font-size","0px");        $("#CTtrenn").css("display","none");        $(".CloseTab").css("display","block");        $(".content").css("background-color","#e1e1e1");        $("#InfoText").css("margin-top","0px");    });});</script><script>$(document).ready(function(){    $(".VLink").click(function(){        $(".VLink").css("border-bottom","2px solid red");        $("#VerhaltensFrame").css("height","3410px");        $("#HierarchyFrame").css("height","0px");        $(".HLink").css("border-bottom","2px solid #696969");        $("#NutzungsFrame").css("height","0px");        $(".NLink").css("border-bottom","2px solid #696969");        $("#AusrüstungsFrame").css("height","0px");        $(".ALink").css("border-bottom","2px solid #696969");        $("#Titel").css("font-size","0px");        $("#InfoText").css("font-size","0px");        $("#CTtrenn").css("display","none");        $(".CloseTab").css("display","block");        $(".content").css("background-color","#e1e1e1");        $("#InfoText").css("margin-top","0px");    });});</script><script>$(document).ready(function(){    $(".ALink").click(function(){        $(".ALink").css("border-bottom","2px solid red");        $("#AusrüstungsFrame").css("height","2500px");        $("#HierarchyFrame").css("height","0px");        $(".HLink").css("border-bottom","2px solid #696969");        $("#NutzungsFrame").css("height","0px");        $(".NLink").css("border-bottom","2px solid #696969");        $(".VLink").css("border-bottom","2px solid #696969");        $("#VerhaltensFrame").css("height","0px");        $("#Titel").css("font-size","0px");        $("#InfoText").css("font-size","0px");        $("#CTtrenn").css("display","none");        $(".CloseTab").css("display","block");        $(".content").css("background-color","black");        $("#InfoText").css("margin-top","0px");    });});</script><script>$(document).ready(function(){    $(".CloseTab").click(function(){        $(".HLink").css("border-bottom","2px solid #696969");        $(".NLink").css("border-bottom","2px solid #696969");        $(".VLink").css("border-bottom","2px solid #696969");        $(".ALink").css("border-bottom","2px solid #696969");        $("#HierarchyFrame").css("height","0px");        $("#NutzungsFrame").css("height","0px");        $("#VerhaltensFrame").css("height","0px");        $("#AusrüstungsFrame").css("height","0px");        $(".CloseTab").css("display","none");        $("#Titel").css("font-size","32px");        $("#InfoText").css("font-size","16px");        $("#CTtrenn").css("display","block");        $("#InfoText").css("margin-top","70px");    });});</script><div id="header_container">    <div id="header">      <a href="http://www.xforigens.com/de-DE/Xbox/GTA%20Online/SEK1"><img src="http://www.xforigens.com/SEK1.png" style="width:98px;height:60px;" alt="xForigens.com"/></a>      <ul>        <li ><a href="http://www.xforigens.com/de-DE/">STARTSEITE</a></li>        <li ><a id="Active" href="http://www.xforigens.com/de-DE/Xbox/GTA%20Online/SEK1/">SEK1</a></li>      </ul>      <div style="width:188px;height:60px;float:right;">         <a href="http://www.xForigens.com/de-DE/"><img src="http://www.xforigens.com/Logo.png" alt="xForigens.com" style="width:188px;height:60px;"></a>      </div>    </div></div><div class="container_content">      <div id="ChangeLogPU"><div id="InfoContainer">  <div id="InfoBox">    <h1 id="!" style="color:white;font-family:comic sans ms;font-size:20px;margin-left:0;margin-top:-2px;text-align:center;">!</h1>  </div>  <div id="InfoExp">    <h1 style="color:black;font-family:comic sans ms;font-size:10px;margin-top:3px;margin-left:5px;">Change-Log kann mit Touchbedienung nicht gescrollt werden!</h1>  </div></div>      <button onclick="document.getElementById('ChangeLogPU').style.display='none';document.getElementById('popcover').style.display='none';" style="background-color:#e1e1e1;border: 2px solid #696969;border-radius:5px;color:black;float:right;margin-right:-2px;margin-top:-2px;">×</button>      <iframe src="http://www.xForigens.com/de-DE/Change-Log" style="border:0;height:350px;width:615px;"></iframe>      </div>      <div id="popcover">      </div>  <div class="MenuSEK">    <div class="MenuSEKL">      <h1 style="color:white;font-size:25px;text-align:center;">SpezialEinheit-SEK1</h1>      <button id="ChangeLogButton" onclick="document.getElementById('ChangeLogPU').style.display='block';document.getElementById('popcover').style.display='block';">Change Log</button>      <p style="color:white;font-size:7px;margin-left:150px;margin-top:-20px;">Erstellt am 22.2.2014</p>      <img src="http://www.xforigens.com/I&B" alt="xForigens & Bumbelrumbel" style="width:545px;height:307px;margin-top:-30px;"/>      <hr style="margin-top:-23px;">      <h2 style="color:white;float:left;font-size:14px;margin-left:170px;margin-top:-5px;">xForigens</h2>      <h2 style="color:white;font-size:14px;margin-left:305px;margin-top:-5px;">Bumbelrumbel</h2>      <hr>      <div class="MenuSEKLinks">      <a class="HLink" href="#">Hierarchy</a>      <a class="NLink" href="#">Nutzungsbedingungen</a>      <a class="VLink" href="#">Verhaltenskodex</a>      <a class="ALink" href="#">Ausrüstung</a>      </div>    </div>    <img id="Jet" src="http://www.xforigens.com/SEK1MHG.png" alt="SEK1MHG"/>  </div>  <div class="content">    <div class="HauptInfo">      <h1 id="Titel">SpezialEinheit-SEK1</h1>      <p id="InfoText">...</p><hr id="CTtrenn">    <h2 id="CT">Crew Termine</h2>    <div style="background-color:#e1e1e1;width:702px;margin:auto;"><table id="Termine" style="width:702px;border:1px solid black;margin:auto;">      <tr>        <th style="background-color:#696969;border:1px solid black;">Zeitpunkte</th>        <td>Montag</td>        <td>Dienstag</td>        <td>Mittwoch</td>        <td>Donnerstag</td>        <td>Freitag</td>        <td>Samstag</td>        <td>Sonntag</td>      </tr>      <tr>        <th style="border:1px solid black;background-color:black;color:white;padding:5px 10px 5px 10px;font-size:10px;">Uhrzeit<br>(Wird gesetzt)</th>        <td style="background-color:#696969;">n/a</td>        <td style="background-color:#696969;">n/a</td>        <td style="background-color:#696969;">n/a</td>        <td style="background-color:#696969;">n/a</td>        <td style="background-color:#696969;">n/a</td>        <td style="background-color:#696969;">n/a</td>        <td style="background-color:#696969;">n/a</td>      </tr>    </table>    </div>    <button class="CloseTab"><b>×</b></button>    </div>    <iframe id="HierarchyFrame" src="http://www.xForigens.com/de-DE/Xbox/GTA%20Online/SEK1/Hierarchy"></iframe>    <iframe id="NutzungsFrame" src="http://www.xForigens.com/de-DE/Xbox/GTA%20Online/SEK1/Nutzungsbedingungen"></iframe>    <iframe id="VerhaltensFrame" src="http://www.xForigens.com/de-DE/Xbox/GTA%20Online/SEK1/Verhaltenskodex"></iframe>    <iframe id="AusrüstungsFrame" src="http://www.xForigens.com/de-DE/Xbox/GTA%20Online/SEK1/Ausrüstung"></iframe>  </div></div><div id="container_footer">  <div id="footer">    <h2><a href="http://www.xforigens.com/de-DE/About">Über</a> | ©xForigens</h2>  </div></div></body></html>

Hoffe das klappt mit HTML Code. Ich benutze diesen Text Editor nie, auch wenn es diesen in etlichen
Foren gibt, aber ich habe deswegen 0 Ahnung wie ich Fenster erstelle, in denen mein Code ist. Sry.

Arne Drews

Zitat

habe ich beim Aktualisieren
feststellen müssen, dass @media nur in sofern funktioniert hat, dass
die ID im normalen CSS komplett ignoriert wurde, aber die aus
dem @media screen... benutzt wurde.

Naja, was meinst Du denn wofür das min bei min-width steht?

XFgn

Zitat von Arne Drews

Naja, was meinst Du denn wofür das min bei min-width steht?

Ja daran hätte ich denken sollen, dass das die mindest-weite ist. Aber selbst bei max-width und einer eingetragenen weite von 50px aktualisiert sich das bei meinem Handy nicht, und das Bild ist nach wie vor nicht sichtbar, da es für den Handy viewport und der verfügbaren größe zu breit ist. Ich habe leider keine Ahnung was ich da falsch machen könnte.

Arne Drews

Welchen Viewport hat denn Dein Device?
Nur mal als Beispiel: wenn es 480px breit ist, hilft Dir max-width:360px auch nicht weiter.
Du musst den Viewport des Endgerätes kennen, um MediaRules sinnvoll nutzen zu können.

XFgn

Zitat von Arne Drews

Welchen Viewport hat denn Dein Device?
Nur mal als Beispiel: wenn es 480px breit ist, hilft Dir max-width:360px auch nicht weiter.
Du musst den Viewport des Endgerätes kennen, um MediaRules sinnvoll nutzen zu können.

Das Engerät welches ist als erstes bearbeiten wollte, war mein S4, mit einem Viewport von 360px.
360px als Viewport haben die meisten Smartphones. Den Viewport von PC und Xbox One kenne ich genau so,
das ist nicht das Problem. Viel eher ist mein Problem dass es nicht funktionieren will, obwohl der Viewport meines S4
360px ist. Und da ist mir bewusst das es egal sein kann, dass mei Handy im Portraitmode 1080px Breite & 1920px Höhe hat.

Arne Drews

Hab nur mal zum Testen folgendes gemacht:

HTML

<!DOCTYPE html>
<html>
<head>
<title>CSS MediaRule</title>
<style type="text/css">
IMG { width:500px; }
@media screen and ( max-width:360px ) { IMG { width:150px; } }
</style>
</head>
<body>


<img src="http://php-rocks.de/uploads/private/hirni.png" alt="">


</body>
</html>

Alles anzeigen

Wenn ich das im Browser anzeigen lasse, erhalte ich exakt, was Du möchtest.
Also entweder machst Du etwas anderes nicht richtig oder Dein Viewport hat halt mehr wie 360px maximal...

XFgn

Zitat von Arne Drews

...
Wenn ich das im Browser anzeigen lasse, erhalte ich exakt, was Du möchtest.
Also entweder machst Du etwas anderes nicht richtig oder Dein Viewport hat halt mehr wie 360px maximal...

Wenn ich mir das mit meinem PC mit einem Viewport von 1280px anzeigen lasse, und das dann mit meinem Handy vergleiche, merke ich erstmal nichts. Vergleiche ich dann aber die Größe des Bildes und die Größe meines 548px großen Containers, sind die definitiv so gut wie gleich groß.
Würde ja meinen Viewport testen, aber mehr als nach meinem Viewport fragen und bei jeder möglichen Quelle für's S4 360px als Antwort zu bekommen, kann ich leider nicht. Ich habe da echt keinen Plan mehr.
Ich verstehe das nicht wirklich. Ich würde es verstehen wenn man bei einer Viewport size von 360px, nur 360px and Gesamtbreite auf der Seite zur verfügung stehen hat. Das Bild geht ziehmlich genau bis zur Mitte des Screens an meinem Handy, anders wie der Container, der mit 545px nur 5px über die Hälfte an an Auflösungsbreite einnimt. Also weit mit überschuss. Ich weiß dann echt nicht was ich da falsch mache.

- - - Aktualisiert - - -

Ich habe allerdings gerade beim herumprobieren herausgefunden, dass wenn ich z.B. device-width: 360px eintrage, wird das media querie NUR für mein Handy angenommen, nicht an meinem PC... Wähle ich dann aber die eigentliche device-width: 1080px weil mein Handy im Portrait 1080px weit ist, wird das media querie allerdings wieder nicht angenommen...

- - - Aktualisiert - - -

Okay, ich habe die Lösung des Problems meinerseits. Gehe ich auf seiten wie viewportsize, oder viewportsizes punkt irgendwas, wrd mir eindeutig gesagt dass ich eine Weite von 360 pixeln beim Viewport mit einer Dichte von 3 habe. So. Das ergibt ja aber die Auflösung in der Breite, nicht wahr? Bin also auf die Idee gekommen dann doch die Portrait-Breitenauflösung bei max-width einzutragen, und siehe da, die ID aus der Querie funktioniert. Aber in wie fern macht es Sinn, wenn doch angeblich die Auflösung bei einem Viewport unentscheidend ist, da Auflösung nicht = Viewport wäre? Das macht jetzt 0 Sinn...
Das heißt aber dann Viewport = device-width und Auflösung in der Breite = width/max-/min-width.

Arne Drews

zur Info: https://css-tricks.com/snippets/css/m…andard-devices/
Und evtl. tiefer in MediaQueries einlesen, wenn Du es benutzen willst: http://www.intensivstation.ch/css3/media-queries/, http://www.w3schools.com/css/css_rwd_mediaqueries.asp

XFgn

Zitat von Arne Drews

zur Info: https://css-tricks.com/snippets/css/m…andard-devices/
Und evtl. tiefer in MediaQueries einlesen, wenn Du es benutzen willst: http://www.intensivstation.ch/css3/media-queries/, http://www.w3schools.com/css/css_rwd_mediaqueries.asp

Das kenne ich alles schon, aber trotzdem danke dafür. Mein Problem war, dass nur einfach nirgendwo steht, dass Viewport mal Pixelrate gerechnet werden muss/die genaue Pixelbreite in der Auflösung letzten Endes das Entscheidende ist. Auf w3schools.com z.B. gibt es mindestens 3 Seiten bezüglich Media Queries, alle gelesen, aber nirgendwo stand etwas davon dass Auflösung = Viewport ist/dass ein Viewport mit Pixelrate in breite dupliziert werden muss. Ansonsten hätte ich das auch verstanden. Ich meine, wenn ich über all nachschau, und mein Handy einen "Viewport" von 360x640px hat, die Auflösung aber 1920 Höhe, und 1080 breite ist, kann ich erstmal schlecht davon ausgehen, dass Viewport mal Pixelrate gerechnet werden MUSS um den EIGENTLICH RICHTIGEN Viewport zu erhalten. Da bringt es leider wenig wenn überall steht das ein S4 einen Viewport von 360x640 hat.

Trotzdem aber Danke für die Hilfe.

- - - Aktualisiert - - -

Folgendes nochmal schnell beschrieben, da mein Browser gerade abgestürzt ist, und ich deswegen ein 2. mal schreiben muss.
Viewportsize.com und Viewportsizes.com(Nicht die einzigen Quellen bei denen ich nachgeschaut habe)
geben an dass mein S4 einen Viewport von 360 x 640px hat. Entscheidend bei der 1.
Seite allerdings war dass mir die Pixelrate angezeigt wurde. Und als ich nachgedacht und herumprobiert habe, kam ich auf
die Idee: Angegebener Viewport: 360 x 640px, Pixelrate ist 3, Auflösung aber 1080 x 1920 px...
Sollte ich nicht dann einfach mal ausprobieren die eigentliche Auflösung zu nehmen, da das Ergebnis von Pixelrate und Viewport
die Auflösung ergibt, was nur Sinn macht. Und kaum habe ich die Auflösung des Handy bei width/min-width/max-width eingegeben,
habe ich es herausgefunden. Viewport MAL Pixelrate = Auflösung = Auflösung ist = Viewport. UND GENAU DAS STAND NIRGENDWO!!!

Arne Drews

Wenn Du soviel gefunden hast, wirst Du doch aber sicher auch mal über solche Dinge gestolpert sein:

HTML

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Das ist ein grundlegendes Element, wenn Du Deine Seiten responsive machen willst.
Das initial-scale benötigst Du glaube ich hauptsächlich für Apple-Produkte, aber width=device-width erspart Dir jede Menge Stress, den Du gerade hast/hattest.

Ok, ich habe nun gedacht, vielleicht wird das auch nicht so häufig erwähnt in den Web-Tutorials, aber bei meiner Suche hatte ich auf der ersten Seite der generischen Suchergebnisse bereits mehrere Seiten, die genau darauf hinweisen.
Deshalb war mein Tipp: Weiter suchen und lesen, dann findet man solche Hinweise auch.

XFgn

Zitat von Arne Drews
Wenn Du soviel gefunden hast, wirst Du doch aber sicher auch mal über solche Dinge gestolpert sein:
HTML
<meta name="viewport" content="width=device-width, initial-scale=1.0">
...

Ich glaube Dich dass ich das schon gesehen habe. Ich bin mir da aber nicht nicht sicher. Ich habe damals halt über Media Queries gelesen, und gedacht dass das der einzige Weg zum "Ziel" wäre. Deswegen mich auch meißt mit Media Queries beschäftigt, bis ich die jetzt brauchte/brauche.

Dann habe ich nur dazu eine Frage... Um einen bestimmten Viewport im Meta tag zu testen, reicht es noch Auflösung/Weite und Höhe des Browserfensters oder der Seite zu ändern richtig? Nur um sicher zu gehen.

Arne Drews

Mit dem <meta>-Tag testest Du nichts, sondern sagst dem Device, dass er den Viewport in Bildschirm-Pixeln berechnen soll.
Damit greifen dann auch wieder die korrekten Werte der MediaQueries. Steht alles in den Links, die ich Dir gepostet habe und Du lt.Aussage alle schon kennst.

Und allgemein: Ein Browser ist per se nicht der ideale Partner zum Testen von mobilen Ansichten.
Ich habe bei dem Entwickler-Tool von Chrome zwar bisher immer passende Ansichten erhalten, aber das Endgerät selbst oder ein entsprechend guter Emulator ist die sicherere Wahl.

@media queries funktionieren nicht

Tags

Benutzer online in diesem Thema