Question

正如问题所述。

由于我需要动态地将元素添加到容器中，我需要在javascript中获取容器的高度和宽度。它完美无缺，直到我在CSS中使用媒体查询来支持移动设备。

容器的高度和宽度都是以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.）< / p>

container-div直接放在body下面。有谁知道问题是什么，并有想法解决它？

P.S。回复答案/评论：

我在手机上使用Safari和chrome进行测试。这种情况发生在Apple的产品和Android上。
我在$（document）.ready（）

Answer 1

可能是个错误。但是，由于容器应该采用整个视口的尺寸，您是否尝试使用$(window).height()？

使用百分比高度与媒体查询时，jquery .height（）无效

1 个答案: