IE 11 und Media Queries: auf einem PC ja, auf dem anderen nein

[Adlerauge]

Hallöchen zusammen,
habe die og. Webseite an drei verschiedene Browser-Weiten angepasst. Bis auf IE funktioniert alles wunderbar: betrachte ich die Seite mit dem IE11 (Vers. 11.0.96) auf meinem Rechner, dann interpretiert er das CSS korrekt, schaue ich mir die Seite mit dem IE11 (Vers. 11.0.96) auf anderen PCs an, interpretiert er die Media Queries gar nicht.

Woran liegt das? Goggeln zu diesem Thema bringt keine Ergebnisse.

Wie sieht die Seite bei Euch aus?
Habe die Queries so gesetzt, dass jede BS-Breite mit einer anderen HI-Farbe gezeigt wird (weiß, blau, grün)

Danke udn Gruß Adlerauge

[Matthias Apsel]

Om nah hoo pez nyeetz, Adlerauge!

habe die og. Webseite an drei verschiedene Browser-Weiten angepasst. Bis auf IE funktioniert alles wunderbar: betrachte ich die Seite mit dem IE11 (Vers. 11.0.96) auf meinem Rechner, dann interpretiert er das CSS korrekt, schaue ich mir die Seite mit dem IE11 (Vers. 11.0.96) auf anderen PCs an, interpretiert er die Media Queries gar nicht.

Woran liegt das? Goggeln zu diesem Thema bringt keine Ergebnisse.

Vielleicht stört sich der IE an den Fehlern und bei dir kommen diese nicht zum tragen, weil du offline gearbeitet hast.

Matthias

[Camping_RIDER]

Aloha ;)

Vielleicht stört sich der IE an den Fehlern und bei dir kommen diese nicht zum tragen, weil du offline gearbeitet hast.

Mit Verlaub: Markupfehler sind Markupfehler. Ob online oder offline spielt da keine Rolle. Zumindest nicht, solange beides (online und offline) wirklich identisch ist.

Das kann imho nicht der Grund sein (außer, wie gesagt, bei nicht-identischen Seiten). Einfallen tut mir aber spontan auch nichts besseres.

Grüße,

RIDER

[Matthias Apsel]

Om nah hoo pez nyeetz, Camping_RIDER!

Mit Verlaub: Markupfehler sind Markupfehler. Ob online oder offline spielt da keine Rolle. Zumindest nicht, solange beides (online und offline) wirklich identisch ist.

Ich halte es nicht für völlig unmöglich, dass ein Browser <meta name="viewport" content="width=device-width; initial-scale=1.0"> ignoriert, wenn er die Datei mit dem file-protokoll anzeigt.

Matthias

[Camping_RIDER]

Aloha ;)

Mit Verlaub: Markupfehler sind Markupfehler. Ob online oder offline spielt da keine Rolle. Zumindest nicht, solange beides (online und offline) wirklich identisch ist.

Ich halte es nicht für völlig unmöglich, dass ein Browser <meta name="viewport" content="width=device-width; initial-scale=1.0"> ignoriert, wenn er die Datei mit dem file-protokoll anzeigt.

Ich hätte noch nie gehört, dass Browser ihre Interpretation des Markups auch nur in irgendeiner Weise vom verwendeten Protokoll abhängig machen. (Okay. Wir reden hier vom IE. Aber trotzdem. Das ist sogar für den zu abstrus...) Macht auch gar keinen Sinn, da Markup in keinster Weise kontextbezogen auf das Protokoll ist.

Und zum anderen: Das von dir angesprochene meta-viewport wird von Desktop-Browsern eben überhaupt nicht (lies: nie - zumindest nach Google Suchergebnissen) ausgewertet.

Außerdem weiß ich nicht auch ganz genau, was eine Interpretation oder Nicht-Interpretation von meta-viewport mit den Markup-Fehlern zu tun haben soll ;) Ich meine - wir reden hier nicht von JavaScript, wo bei einem Fehler u.U. alles andere auch mit abbricht. Damit Markup-Fehler relevant würden, müssten sie schon direkt in Verbindung mit den in Frage stehenden media-query's stehen.

Ich gehe jetzt einfach mal implizit davon aus, dass uns der TO keine wichtigen Informationen vorenthält und mit "mein Rechner" und "andere PCs" tatsächlich vergleichbare Maschinen meint - und nicht zum Beispiel ein Mobilgerät und einen Desktop-PC. Sonst würde ich dir nämlich recht geben. Dann hängts an meta-viewport. Aber nicht wegen Online und Offline bzw. http/file, sondern einfach daran, dass der eine Browser meta-viewport interpretiert und der andere nicht. Das ist nämlich so.

Grüße,

RIDER

[Adlerauge]

Danke für Eure Antworten,
ich arbeite immer online.
Bis jetzt komme ich zu folgendem Schluss: auf allen Rechnern, an denen ich online immer per typo3 an der Webseite arbeite, interpretiert der IE 11 die media queries korrekt und auf allen anderen PC tut er das überhaupt nicht....
Aber das kann doch nicht sein.

Ich füge mal die queries hinzu - vielleicht findet Ihr ja irgendwelche Fehler, die ich übersehen habe?!?!!?

Ich sage schon mal DANKE! Adlerauge

/*********************************************/
/* Bildschirm, normal (devices and browsers) */
/*Breite: 961px - unendlich*/
@media all and (min-width: 961px)             {

.slider_first {height:320px;}

} /*/

/***************************************************************/
/* Tablet Portrait size to standard 960 (devices and browsers) */
/*Breite: 771px - 960px*/

@media all and (min-width: 771px)           {

.slider_first {height:none;}

}/*/

/************************************************************************/
/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
/* width: 481-770px*/

@media all and (min-width: 481px) and (max-width: 770px)  {

.slider_first {height:none;}

img, embed, object, video {max-width: 100%; height: auto; height: 50%; overflow:hidden; width: auto; width:100%;}
*html img {width: auto; /* IE8 */}

.col_66, .col_50, .col_33, .col_25 {float:none; width:98%; margin:0 auto 0 auto; padding:1%;}

.content, .header-top, .footer, .mainmenu {min-width:481px; max-width:770px; width:100%; padding:0; margin:0;}

.title, .title h1 {float:none; display:block;}

/*text und bild; float aufheben*/
.csc-textpic-imagewrap, .csc-textpic-image {float:none; width:100%;}
.csc-textpic-image a img, .csc-textpic-image img {max-width: 100%; height: auto; width: auto;}
.csc-textpic-text {display:block; width:100%; }

/*text und bild; float aufheben*/
.csc-textpic-imagewrap {float:none;}
.csc-textpic-image a img, .csc-textpic-image img {width:100%;}
.csc-textpic-text {display:block; width:100%; }

} /*Klammer: Ende 481-770*/

/************************************************************************/
/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
/* Width:321-480px*/

@media all
and (min-width: 321px)
and (max-width: 480px)                  {

/*Header_top und slider nicht mehr fixed--> keine PlatzProbleme mit nachfolgenden Inhalten*/
.header_top {position:relative; margin-bottom:0;}
.bce_logo {padding:0;}
.bce_logo img {width:100%, height:auto;}
.slider_first {overflow:hidden; width:100%; padding:0; height:none;}

img, embed, object, video {max-width: 100%; height: auto; height: 50%; overflow:hidden; width: auto; width:100%;}
*html img {width: auto; /* IE8 */}

.col_66, .col_50, .col_33, .col_25 {float:none; width:98%; margin:0 auto 0 auto; padding:1%;}

.content, .header-top, .footer, .mainmenu {min-width:321px; max-width:480px; width:100%; padding:0; margin:0;}

/*mainnavi*/
ul.menu {margin:0 auto; box-shadow:none;}
ul.menu li {float:none; margin:0 auto; text-align:center; box-shadow:none;box-shadow:none;}

.mainmenu ul.menu, .mainmenu ul.menu ul {list-style-type: none; }
.mainmenu ul.menu {padding:0; margin:0; text-align:center; box-shadow:none; }
ul.menu a {
  display: block;
  padding: 0.1em 0;
  font-weight:normal;
  text-decoration:none;}

ul.menu ul a {padding: 0.1em 0;}
ul.menu ul li a {font-size:1em;} /*16px*/
ul.menu li {
    padding:0 0 0;
    margin:0;
    background-image: none;
    float:none;
    display:block;
    background-color:silver;
    box-shadow:none;
 }

ul.menu ul {
  margin:0;
  margin-left:0;
    padding:0;
    position: relative;
    display:block;
    background-color:#fff;
    min-width:100%;
    z-index:10;
    clear:both;
    display:none;
    box-shadow:none;
}

/*aufgeklapptes Untermenu HOVER*/
ul.menu ul li:hover {display:inline-block; box-shadow:none; background:none;}

ul.menu ul li a {
  display:block;
  font-size:70%;
  padding: 0.3em;
  font-weight:normal;
  text-decoration:none;
  border:0;
  shadow:none;
  background:none;}

/*a normal und ACTIVE*/
ul.menu li a {text-transform:none;}
ul.menu li a:hover, ul.menu li a.active {color:#666; border:none;  background:none;}

.rounded_top {border:none; box-shadow:none;}

/*text und bild; float aufheben*/
.csc-textpic-imagewrap, .csc-textpic-image {float:none; width:100%; }
.csc-textpic-image a img, .csc-textpic-image img {max-width: 100%; height: auto; width: auto;}
.csc-textpic-text {display:block; width:100%; }

/*text und bild; float aufheben*/
.csc-textpic-imagewrap {float:none;}
.csc-textpic-image a img, .csc-textpic-image img {width:100%;}
.csc-textpic-text {display:block; width:100%; }

} /*Klammer: Ende 321-480px*/

/************************************************************************/
/* Mobile Portrait Size to Mobile portrait Size (devices and browsers) */
/* Width:320px*/

@media all
and (max-width: 320px)         {

/*Header_top nicht mehr fixed--> keine PlatzProbleme mit nachfolgenden Inhalten*/
.header_top {position:relative; margin-bottom:0;}
.bce_logo {padding:0;}
.bce_logo img {width:100%, height:auto;}
.slider_first {overflow:hidden; width:100%; padding:0; height:none;}

img, embed, object, video {max-width: 100%; height: auto; height: 50%; overflow:hidden; width: auto; width:100%;}
*html img {width: auto; /* IE8 */}

.col_66, .col_50, .col_33, .col_25 {float:none; width:98%; margin:0 auto 0 auto; padding:1%;}

.content, .header-top, .footer, .mainmenu {max-width:320px; width:100%; padding:0; margin:0;}

.header-top, .footer {display:none;}

/*mainnavi*/
ul.menu {margin:0 auto;}
ul.menu li {float:none; margin:0 auto; text-align:center;}

/*text und bild; float aufheben*/
.csc-textpic-imagewrap, .csc-textpic-image {float:none; width:100%; }
.csc-textpic-image a img, .csc-textpic-image img {max-width: 100%; height: auto; width: auto;}
.csc-textpic-text {display:block; width:100%;}

/*text und bild; float aufheben*/
.csc-textpic-imagewrap {float:none;}
.csc-textpic-image a img, .csc-textpic-image img {width:100%;}
.csc-textpic-text {display:block; width:100%;}

} /*Klammer: bis 320px*/

/************************************************************************/
/* highres devices */
@media all and (-moz-min-device-pixel-ratio:1.5),
  screen and (-o-min-device-pixel-ratio:3/2),
  screen and (-webkit-min-device-pixel-ratio:1.5),
  screen and (min-device-pixel-ratio:1.5){}

[Camping_RIDER]

Aloha ;)

Ich füge mal die queries hinzu - vielleicht findet Ihr ja irgendwelche Fehler, die ich übersehen habe?!?!!?

Vergleich mal

/*Breite: 961px - unendlich*/
@media all and (min-width: 961px)

mit

/*Breite: 771px - 960px*/

@media all and (min-width: 771px)

Das ist sicher nicht das, was du willst (zweiteres). Du willst bestimmt eher

@media all and (min-width: 771px) and (max-width: 960px)

Zumindest ist das das, was dein Kommentar suggeriert.

Ob das der einzige oder der springende Fehler war, kann ich dir nicht sagen.

Grüße,

RIDER

[Auge]

Hallo

/*Breite: 961px - unendlich*/
@media all and (min-width: 961px)

mit

/*Breite: 771px - 960px*/

@media all and (min-width: 771px)

Das ist sicher nicht das, was du willst (zweiteres). Du willst bestimmt eher

@media all and (min-width: 771px) and (max-width: 960px)

Zumindest ist das das, was dein Kommentar suggeriert.

Mit der richtigen Reihenfolge der Definitionen wäre sein Vorgehen richtig, auch wenn Gunnar auf der ungeeigneten verwendung von px als Einheit herumreiten wird. Bei Verwendung von min-width *und* max-width kann es, abhängig von der verwendeten Maßeinheit passieren, dass sich zwischen max-width des ersten Queries und min-width des Zweiten eine undefinierte Lücke auftut.

Werden erst die Angaben zum schmaleren Viewport (mit min-width) notiert und danach durch die Angaben zum breiteren Viewport überschrieben, passt das schon. Allerdings muss man halt auch darauf achten, was bei welchen Änderungen überschrieben werden soll und ob einem irgendeine Spezifität dazwischenhaut.

Tschö, Auge