Opcjonalne wykonywanie Javascript na podstawie zapytań o media

Question

Próbuję dowiedzieć się, w jaki sposób można opcjonalnie uruchomić blok javascript na podstawie bieżącego zapytania urządzenia/nośnika. Używam Twitter Bootstrap i mają zasadniczo dwie wersje zapytaniami mediów:

@media (min-width: 980px) { ... } <!-- Desktops --> 
@media (max-width: 979px) { ... } <!-- Smaller screens/tablets/phones --> 

Mam mapę, która wygenerować, ale ja nie pokazuje go w telefonie/mała wersja ekran forb andwidth powodów. Jednak javascript nadal działa w tle, nawet jeśli nie widzisz go na ekranie telefonu. Tak, staram się znaleźć sposób w javascript, gdzie mogę zrobić coś takiego:

// Imaginary function 
var screenType = getScreenType(); 

if(screenType == 1) { 
    // Load map 
} 

mam read about ludzie Ustawianie właściwości CSS do określonych wartości w swoich zapytań mediów, a następnie próbuje znaleźć ten element DOM na podstawie właściwości CSS, ale musi być lepszy sposób. Jakieś pomysły?

Answer 1

Co powiesz na używanie javascript?

<script type="text/javascript"> 

if (screen.width < 980) { 

document.write('<link href="UrLowRes.css" type="text/css" rel="stylesheet"/>'); 

} else { 

document.write('<link href="UrlHighRes.css" type="text/css" rel="stylesheet"/>'); 

} 

</script> 

Answer 2

Można także za pomocą wtyczki o nazwie MinWidth:

minwidth(940, function() { 
    //do whatever you need 
}); 

Ale to działa tylko wtedy, gdy nie podczas zmiany rozmiaru strona ładuje ..

http://edenspiekermann.com/en/blog/responsive-javascript-helpers

Answer 3

Można znaleźć Niewiążąca Biblioteka .js pomocna:

http://wickynilliams.github.com/enquire.js/

CSS-Tricks artykuł: http://css-tricks.com/enquire-js-media-query-callbacks-in-javascript/

Answer 4

Obecna odpowiedź Zaakceptowany nie jest wystarczająco dobry, należy sprawdzić window.matchMedia

można wykryć zmiany wymiarów rzutni, ale trzeba obliczyć czynniki, takie jak orientacja i współczynniki proporcji i nie ma gwarancji, że nasze obliczenia będą zgodne z naszymi założeniami przeglądarki, gdy stosują reguły zapytań o media.

To znaczy, można obliczyć X, ale Twoja przeglądarka założenie może być Y. więc myślę, że lepiej jest użyć tych samych zasad przeglądarki, a window.matchMedia prawda

var jmediaquery = window.matchMedia("(min-width: 480px)") 
if (jmediaquery.matches) { 
    // window width is at least 480px 
} 
else { 
    // window width is less than 480px 
} 

Można nawet odbierać zapytania powiadomienie za pomocą detektora

var jmediaquery = window.matchMedia("(orientation: portrait)"); 
jmediaquery.addListener(handleOrientationChange); 
handleOrientationChange(jmediaquery); 

function handleOrientationChange(jmediaquery) { 
    if (jmediaquery.matches) { 
     // orientation changed 
    } 
} 

Jeśli nie trzeba już otrzymywać powiadomień o zmianach wystarczy zadzwonić removeListener()

jmediaquery.removeListener(handleOrientationChange);