Thực thi Javascript tùy chọn dựa trên Truy vấn phương tiện

Question

Tôi đang cố gắng tìm hiểu cách tôi có thể tùy chọn chạy một khối javascript dựa trên truy vấn thiết bị/phương tiện hiện tại. Tôi đang sử dụng Twitter Bootstrap và về cơ bản có hai phiên bản truy vấn phương tiện:

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

Tôi có bản đồ mà tôi tạo, nhưng không hiển thị bản đồ trong lý do forb và thông số phiên bản màn hình nhỏ/di động. Tuy nhiên, javascript vẫn thực hiện trong nền mặc dù bạn không thể nhìn thấy nó trên màn hình điện thoại di động. Vì vậy, tôi đang cố gắng để tìm ra cách trong javascript nơi tôi có thể làm điều gì đó như:

// Imaginary function 
var screenType = getScreenType(); 

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

Tôi đã read about người thiết lập thuộc tính CSS cho các giá trị cụ thể trong các truy vấn phương tiện truyền thông của họ và sau đó cố gắng để thấy rằng phần tử trong DOM dựa trên thuộc tính CSS, nhưng đã có một cách tốt hơn. Ý tưởng nào?

Answer 1

Làm thế nào về việc sử dụng javascript cho điều đó?

<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

Bạn cũng có thể sử dụng một plugin gọi là MinWidth:

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

Nhưng nó chỉ có tác dụng khi tải trang không khi thay đổi kích thước ..

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

Answer 3

Bạn có thể tìm ra Inquire .js thư viện hữu ích:

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

CSS-Tricks Bài chi tiết: http://css-tricks.com/enquire-js-media-query-callbacks-in-javascript/

Answer 4

Câu trả lời được chấp nhận hiện nay là không đủ tốt, bạn nên kiểm tra window.matchMedia

Bạn có thể phát hiện những thay đổi chiều hướng khung nhìn, nhưng bạn phải tính toán các yếu tố như định hướng và tỷ lệ khung hình và không đảm bảo tính toán của chúng tôi sẽ khớp với các giả định trình duyệt của chúng tôi khi nó áp dụng các quy tắc truy vấn phương tiện.

Ý tôi là, bạn có thể tính X, nhưng giả định trình duyệt của bạn có thể được Y. Vì vậy, tôi nghĩ là tốt hơn để sử dụng quy tắc cùng một trình duyệt, và window.matchMedia làm nó

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

Bạn thậm chí có thể nhận được truy vấn thông báo sử dụng một người biết lắng nghe

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

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

Nếu bạn không còn cần phải nhận được thông báo về những thay đổi chỉ cần gọi removeListener()

jmediaquery.removeListener(handleOrientationChange);