Javascript 将百分比高度用于媒体查询时，jquery.height（）不起作用

如问题所述

因为我需要动态地将元素添加到容器中，所以我需要获取javascript中容器的高度和宽度。在我使用CSS中的媒体查询来支持移动设备之前，它工作得非常好

html,body{
    width:100%;
    height:100%;
}
.container-div{
    width:500px;
    height:500px;
}
@media (max-width: 500px){
    .container-div{
        width:100%;
    }
}
@media (max-height: 500px){
    .container-div{
        height:100%;
    }
}

容器在px中有固定的高度和宽度，但是当它到达移动设备时，它太大了，我希望它占据设备的100%高度

html,body{
    width:100%;
    height:100%;
}
.container-div{
    width:500px;
    height:500px;
}
@media (max-width: 500px){
    .container-div{
        width:100%;
    }
}
@media (max-height: 500px){
    .container-div{
        height:100%;
    }
}

然后，在javascript中：

console.log ($(".container-div").height());
console.log ($(".container-div").width());

当媒体查询未触发时，它可以正常工作。但是，当屏幕变小并触发媒体查询时，函数始终返回100。（这是我在CSS中设置的百分比。我测试过，当我在CSS中更改为90%时，它返回90。）

容器div直接放在主体下方。有人知道问题出在哪里并且有解决问题的办法吗

附：对答复/评论的答复：

我在手机上使用Safari和chrome进行测试。这在苹果产品和安卓系统上都会发生

我正在加载$（document.ready（）中的命令

---

可能是个虫子。但是，由于容器应该具有整个视口的尺寸，您是否尝试使用

$（window）.height（）

？

我在Mozilla 17.0.10上尝试了您的代码。您的代码在这里运行良好。我在Mozilla中按ctrl+shift+m选中了移动视图。谢谢，上面添加了PS。我分别在Android和苹果系统上使用Chrome和Safari。我已经这样做了，但我觉得我应该在下次使用90%之前解决这个问题。（如果我们的设计师改变主意，可能是明天）还有，您的代码在什么时候执行$（文档）.ready（）或更高版本？一个错误修复可能是从视口高度和百分比计算像素。我正在加载$（document）.ready（）中的命令。谢谢提醒，此信息将添加回问题。