как я могу вызвать функцию matchmedia без изменения размеров браузера - PullRequest
Новая
       74

как я могу вызвать функцию matchmedia без изменения размеров браузера

0 голосов
/ 04 марта 2019

Я не очень хорош в javascript, но я попробовал эту функцию. 

<script> 

function myFunction(divswitch) {
  if (divswitch.matches) { // If media query matches

  } else {

  }
}

var divswitch = window.matchMedia("(max-width: 640px)")
myFunction(divswitch) // Call listener function 
divswitch.addListener(myFunction) // Attach listener 


</script>

Скрипт вызывается, только если пользователь переключает свои размеры браузера.Может ли кто-нибудь исправить код для пользователей, которые могут переключать размеры своего браузера.для экранов размером менее 640 пикселей, как мобильные телефоны.

Ответы [ 2 ]

0 голосов
/ 05 марта 2019

Ну, важно, чтобы скрипт работал при загрузке страницы и при изменении размера.Вот почему я пишу этот скрипт. 

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>function mobilefix(divswitch) {
  if (divswitch.matches) { // If media query matches
    $("#divid").insertAfter("#otherdivid")
  } else {
    $("#otherdivid").insertAfter("#divid")
  }
}  

var divswitch = window.matchMedia("(max-width: 640px)");
window.addEventListener('load', function() {
    mobilefix(divswitch);
})
window.addEventListener('resize', function() {
    mobilefix(divswitch);
})

thx @ vicodin

Код немного длинный.Но результат, как и ожидалось.

Вопрос только в том, как изменить 2 деления на основе размера носителя еще короче.Но не так важно.

0 голосов
/ 05 марта 2019

Вам нужно что-то подобное: 

function logMatchStatus(divswitch) {
  if (divswitch.matches) { 
    console.log("It matches");
  } else {
    console.log("It doesn't");
  }
}

window.addEventListener('resize', function() {
    var divswitchExample = window.matchMedia("(max-width: 640px)");
    logMatchStatus(divswitchExample);
})

Я изменил некоторые имена, чтобы сделать их более значимыми (и я рекомендую вам делать это всегда), но сохранил ваш код таким же.

Вы можете прочитать о addEventListener здесь и здесь

Также обратите внимание, что в моем примере я использую событие resize, поэтому вы можете запустить сниппет, проверить консоль и изменить ширину окна, чтобы обеспечить егоработает.Если вам нужно, чтобы ваша функция работала только при загрузке страницы, замените 'resize' на 'load'

...