Question

我的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像素的屏幕。

Answer 1

您需要类似的东西：

"devDependencies": {
    "babel-core": "^7.0.0-beta.47",
    "babel-jest": "^23.2.0",
    "detox": "10.0.3",
    "eslint-config-rallycoding": "^3.2.0",
    "jest": "^23.4.2",
    "react-test-renderer": "16.4.1"
  },
  "jest": {
    "preset": "react-native"
  },
"devDependencies": {
        "babel-core": "^7.0.0-beta.47",
        "babel-jest": "^23.2.0",
        "detox": "10.0.3",
        "eslint-config-rallycoding": "^3.2.0",
        "jest": "^23.4.2",
        "react-test-renderer": "16.4.1"
      },
      "detox": {
        "test-runner": "jest",
        "specs": "e2e",
        "configurations": {
          "ios.sim.debug": {
            "binaryPath": "ios/build/Build/Products/Debug-iphonesimulator/hektor.app",
            "build": "cd ios && xcrun xcodebuild -workspace hektor.xcworkspace -scheme hektor -configuration Debug -destination 'platform=iOS Simulator,name=iPhone X,OS=12.1'  -derivedDataPath build && cd ..",
            "type": "ios.simulator",
            "name": "iPhone X"
          },

          "android.emu.debug": {
            "binaryPath": "android/app/build/outputs/apk/debug/app-debug.apk",
            "build": "cd android && ./gradlew assembleDebug assembleAndroidTest -DtestBuildType=debug && cd ..",
            "type": "android.attached",
            "name": "2e1c66bf",
            "adb": "2e1c66bf"
          }
        }
      }
}

我更改了一些名称以使其更有意义（并且我鼓励您始终这样做），但保持您的代码不变。

您可以了解有关addEventListener here和here

的信息。

还要注意，在我的示例中，我使用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); })事件，因此您可以运行代码段，检查控制台并更改窗口宽度以确保其正常工作。如果您需要仅在页面加载时触发的函数，则将resize替换为'resize'

Answer 2

重要的是，脚本在页面加载和调整大小时运行。这就是为什么我编写此脚本的原因。



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格。但不是那么重要。

如何在不更改浏览器尺寸的情况下调用matchmedia函数

2 个答案: