你可以在Android Chrome上添加一個javascript回調監聽器給matchMedia嗎？

我在頁面上使用了matchMedia，我注意到在Android版Chrome瀏覽器中，檢查匹配是有效的，但是當您嘗試向媒體查詢添加偵聽器時，回調函數從不會觸發。你可以在Android Chrome上添加一個javascript回調監聽器給matchMedia嗎？

我已經在桌面上運行相同的代碼，它工作正常，但它似乎沒有在Chrome瀏覽器中的Android 4.x設備上的偵聽器中調用回調。這沒有在瀏覽器中實現嗎？

var width768Check = window.matchMedia("(min-width: 768px)"); 
console.log(width768Check.matches); 
console.log(width768Check.addListener); 
width768Check.addListener(function(mediaQueryList) { 
    console.log(mediaQueryList.matches); 
});

UPDATE

我一直在使用Nexus 7平板電腦與谷歌瀏覽v18.0.1025469和Android V4.2.1和華碩變壓器平板電腦使用相同版本的谷歌瀏覽器和不同的測試Android版本，v4.0.3。

有趣的是，華碩平板電腦正確地使用偵聽器回調函數，Nexus 7沒有。我不確定爲什麼在較新版本的Android操作系統上使用相同版本的Chrome會導致問題。另外，對於Nexus 7，我下載了Dolphin Browser，並且一切正常。

來源

2012-12-05 Kyle Buchanan

據此它有：http://caniuse.com/matchmedia –

我知道在Android上的Chrome支持matchMedia，但回調監聽器似乎並沒有一貫地解僱。 –

當設置了視口顯示寬度設備像素時，屏幕的尺寸爲601x880像素，這是基於devicepixel密度按比例縮小（1.3上的N7）

這可以解釋你所看到的並且可以在這裏的測試中看到：http://jsbin.com/eyorap/latest

如果您沒有設置視口寬度，即使screen.width報告601，媒體查詢也會匹配，因爲它應該使用實際的設備寬度。看到這個演示：http://jsbin.com/igifon

來源

2013-03-01 00:01:54 Kinlan

我也遇到了這個問題，並發現 - 至少在網絡 - 一個有趣的建議的解決方法：

media query listener for WebKit

而且我測試過這個解決方案上的帶有Chrome的iPhone 4S，以及使用Chrome的三星Galaxy Nexus（或其他）上的（重要！），並且它很有效。

這有點難看，但我發現它比等待良好的工作orientationchange事件（在文檔或屏幕上）更好。

來源

2013-11-01 14:10:14 BairDev

您可以嘗試輕量級Enquire .js庫。它處理匹配和不匹配的回調+初始可選功能。它似乎在Chrome瀏覽器的Android設備上運行良好，但我目前在Native瀏覽器上觸發方向匹配時遇到困難。

另外：Paul Irish擁有自己的implementation for matchMedia。

來源

2015-03-18 17:14:38

你可以在Android Chrome上添加一個javascript回調監聽器給matchMedia嗎？

回答

相關問題