Question

我有一个关于JQuery的问题。我正在尝试设计我的网站的移动部分，我遇到了一个错误。所以我有3种不同屏幕尺寸的CSS（480，平板电脑类型和默认）。移动版本中有更多的平铺布局，其中包含jQuery但我只希望它能够与移动480屏幕尺寸一起使用。我这样做

$(document).ready(function () {
    if ($(window).width() < 481) {

我发现的错误是如果我在手机上并以纵向模式加载网站，然后将我的屏幕转到横向模式，css正确更新，因此它不再执行磁贴类型，而是更多列，但然后jQuery仍在工作，我可以切换我不想切换该大小的东西，只有瓷砖设置。反正有没有这样做？如果我在横向模式下加载我的网站，jQuery不加载（这是好的），它只在我切换时。我知道这是因为它检查了页面加载时的屏幕大小，但是任何人都有解决方法的想法吗？

Answer 1

由于您使用相同分辨率的媒体查询，这就是我的工作。

在您的Jquery中，测试媒体查询更改。例如，让我们说你有这个：

 @media (max-width: 480px) { 
      #someDiv {
          display:none;
     }
 }

在你的JQuery中，你可以这样做：

 if($("#someDiv").css("display") == "none") {
     // do whatever you want in Javascript that will only be run if that css media query is triggered
 }

移动网站的jQuery问题

1 个答案: