Responsywna strona nie działa w IE (pomimo css3-mediaqueries.js)

Tworzę Responsywną stronę, ale nie mogę sprawić, żeby działała w IE (testuję w IE8). Teraz wiem, że Internet Explorer 8 i poniżej nie obsługuje zapytań o media CSS3. Ale zawarłem plik JavaScript css3-mediaqueries.js (hostowany przez Google) i nadal nie działa.Responsywna strona nie działa w IE (pomimo css3-mediaqueries.js)

Usunąłem cały kod, pozostawiając minimum (dosłownie tylko 26 linii HTML i połączone 34 linie CSS). HTML powodzeniem sprawdza jak HTML5 i CSS sprawdza jako poziom CSS 3. Oto kod:

HTML

<!DOCTYPE HTML> 
<html> 
<head> 
<meta charset="utf-8"> 
<meta name="viewport" content="width=device-width, maximum-scale=1.0, minimum-scale=1.0, initial-scale=1.0" /> 
<title>Responsive Site</title> 
<link rel="stylesheet" type="text/css" href="css/custom.css" /> 
<link rel="stylesheet" type="text/css" media="only screen and (min-width:50px) and (max-width: 800px)" href="css/responsive.css" /> 

<!--[if lt IE 9]> 
    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> 
<![endif]--> 

<!-- css3-mediaqueries.js for IE less than 9 --> 
<!--[if lt IE 9]> 
    <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script> 
<![endif]--> 

</head> 
<body> 
<div class="wrapper"> 
    <div id="article">&nbsp;</div> 
    <div id="side">&nbsp;</div> 
</div> 
</body> 
</html>

custom.css:

@charset "UTF-8"; 

/*html5 display rule*/ 
article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary {display: block;} 

body {margin: 0px; padding:0px} 

.wrapper { 
    width:78%; 
    margin:0 auto} 

#article { 
    float:left; 
    width:61.224489795%; 
    margin:20px 0 0 0; 
    padding:0; 
    height:500px; 
    background-color:#000} 

#side { 
    float:right; 
    width:30.775510204%; 
    margin:20px 0 0 0; 
    padding:0; 
    height:500px; 
    background-color:#999}

responsive.css :

@charset "UTF-8"; 

#article { 
    width:100%} 

#side { 
    width:100%; 
    clear:left}

Źródło

2013-02-28 Joe B.

W końcu to wymyśliłem! I tylko kilka linii kodu musiało się zmienić.

przyjaciel wskazał, że documentation dla CSS3-mediaqueries.js pliku JavaScript brzmi:

Uwaga: Nie działa na @ import'ed stylów (których nie powinno się używać tak czy inaczej ze względu na wydajność). Nie będzie także słuchać atrybutu media i atrybutu " ".

Wykorzystałem atrybut media w elemencie link w moim pliku HTML. Więc oto co zrobiłem, aby rozwiązać ten problem:

W pliku HTML usunąłem:

<link rel="stylesheet" type="text/css" media="only screen and (min-width:50px) and (max-width: 800px)" href="css/responsive.css" />

i zastąpił go:

<link rel="stylesheet" type="text/css" href="css/responsive.css" />

Następnie dodałem atrybut media do mojego pliku responsive.css:

@charset "UTF-8"; 
@media screen and (max-width: 800px) { 
#article { 
    width:100%} 

#side { 
    width:100%; 
    clear:left} 
}

Ale nadal nie działa. Następnie zmieniłem kolejność atrybutów media i @charset w pliku responsive.css.Ja po prostu uporządkowane linie 1 & 2:

@media screen and (max-width: 800px) { 
@charset "UTF-8";

To załatwiło sprawę. Nie wiesz dokładnie, dlaczego kolejność zestawów znaków robi różnicę? Być może ktoś może rzucić trochę światła na to.

Dzięki David za przydatne sugestie! Dobrze jest mieć kilka opcji w szopie narzędzia i mogę zwrócić się do response.js w przyszłości. Ale na razie cieszę się z kodu, który Google udostępnia.

Źródło

2013-02-28 17:32:17

Dobrze jest znaleźć rozwiązanie! –

Czy próbowałeś już respond.js?

Powodzenia!

Aktualizacja

Może być bezpieczniej połączyć swoje dwa pliki CSS w jednym. Dodaj specyfikacje mobilne do pliku custom.css, podając:

@media (min-width: 50px) and (max-width: 800px) { 

    /* mobile CSS here */ 

} /* close @ media for mobile */

Źródło

2013-02-28 02:03:11

Dziękuję za odpowiedź. Próbowałem połączyć się z JS, o którym mnie poinformowałeś na serwerze zewnętrznym, a także na mojej lokalnej maszynie, ale bez skutku. Css3-mediaqueries.js JavaScript (który początkowo próbowałem) jest tym, co większość programistów zaleca, w tym Ethan Marcotte, facet, który ukuł termin Responsive Web Design w 2010: [Responsive Web Design History] (http: // en. wikipedia.org/wiki/Responsive_web_design#History). Co na świecie robię źle? –

Jeszcze nie poddawaj się response.js;) Zacznij od http://scottjehl.github.com/Respond/test/test.html z IE7 lub IE8 i zmień rozmiar okna. Jeśli zmienia się kolor tła, to jest to dobre. Spróbuj pobrać skrypt answer.js ze strony https://raw.github.com/scottjehl/Respond/master/respond.min.js i zainstalować go na swojej stronie. Nie jestem pewien, dlaczego, ale niektórzy ludzie odnoszą więcej sukcesów z respond.js i innymi z css3-mediaqueries.js –

Oprócz niemożności korzystania @imported arkuszy stylów (co jest udokumentowane na github i projektu Google Code) - nie ma problemu, jeśli nie wyraźnie stwierdzić zapytania mediów w formacie zbliżonym do:

@media screen and (min-width: 666px) and (max-width: 1000px)

porównaniu do:

@media and (min-width: 666px) and (max-width: 1000px)

proszę spojrzeć na ten temat w sekcji zagadnienia gitHub dla tego projektu - po około godzinie próbuje ustawić to - brak ekranie w moich medialnych-zapytaniami było caus aby ich nie rozpoznano.

Źródło

2013-07-19 02:03:12

<meta http-equiv="X-UA-Compatible" content="IE=9">

należy umieścić że przed żadnych inne meta tagi.

Źródło

2015-05-15 15:40:11

Responsywna strona nie działa w IE (pomimo css3-mediaqueries.js)

Odpowiedz

Powiązane problemy