matchMedia().addListener marked as deprecated, addEventListener equivalent?
来源： https://stackoverflow.com/questions/56466261/matchmedia-addlistener-marked-as-deprecated-addeventlistener-equivalent
matchmedia
Safari ignore window.matchMedia
问题 I'm using window.matchMedia conditional in order to avoid the inject of a video in mobile devices. Here it says that matchMedia is going to work smoothly since Safari 9 (I'm testing on it), but my code is completly ignored: if ( window.matchMedia("(min-width: 1025px").matches) { console.log('match'); document.addEventListener("DOMContentLoaded", function() { initialiseMediaPlayer(); }, false); function initialiseMediaPlayer() { (stuff here...) } } This code works perfectly on Chrome, Chromium
Safari window.matchMedia handler not called
问题 I need to execute doSomethingFunc , when afterPrint happens. My code is working fine on all browsers, except the current Safari-Versions (Safari 10.1 on OSX and the Safari Browser from iOS 10.3). It seems that the event listeners (at least for print) are not called for these two browsers. const mediaQueryPrint = window.matchMedia('print'); mediaQueryPrint.addListener((mql) => { if (!mql.matches) { setImmediate(doSomethingFunc); } }); window.print(); The code above works perfectly with OSX
window.matchMedia('print') failing in Firefox and IE
问题 I have a print button that launches the print functionality on any webpage. The button hides as soon as the user clicks on it and shows if the user is done printing or presses close in the print window. It works fine in Chrome but is failing in firefox and IE. <input type="button" onclick="launchPrint()" value= "Print me" /> function launchPrint(){ $(".print-box").hide(); window.print(); } (function() { if (window.matchMedia) { var mediaQueryList = window.matchMedia('print'); mediaQueryList
Adaptive (“image ID + text string”) JavaScript for Responsive Images
问题 I've been using the following code for my responsive image replacements: //HTML: <img id="testimage" onLoad="minWidth32('test_image')" src="testimage_small.jpg"> //JavaScript: var screencheck = window.matchMedia("(min-width: 32em)"); function minWidth32(imageName) { if (screencheck.matches) { currentImage = document.images[imageName]; currentImage.src = imageName + "_large.jpg"; } } (edit)New streamlined version of JavaScript: var screencheck = window.matchMedia("(min-width: 32em)"); function
matchMedia calls functions twice
问题 I am trying to use a function on mobile devices (less than 700px in this example) and another function on large devices. I use matchMedia in the following way: var mql = window.matchMedia("(min-width: 700px)"); mql.addListener(handleResize); handleResize(mql); function handleResize(mql) { if (mql.matches) { $(".button").on("click", function(){ $(".hidden").slideToggle(); }) } else { $(".button").on("click", function(){ $(".hidden").fadeToggle(); }) } } At first, the code behaves as expected,
window.matchMedia('print') failing in Firefox and IE
I have a print button that launches the print functionality on any webpage. The button hides as soon as the user clicks on it and shows if the user is done printing or presses close in the print window. It works fine in Chrome but is failing in firefox and IE. <input type="button" onclick="launchPrint()" value= "Print me" /> function launchPrint(){ $(".print-box").hide(); window.print(); } (function() { if (window.matchMedia) { var mediaQueryList = window.matchMedia('print'); mediaQueryList.addListener(function(mql) { if (!mql.matches) { $(".print-box").show(); } }); } }()); Any suggestions