2

如问题所述。

由于我需要动态地将元素添加到容器中，因此我需要在 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。）

container-div 直接放在 body 下方。有人知道问题出在哪里并有解决方法吗？

PS 回复答案/评论：

  1. 我在移动设备上使用 Safari 和 chrome 进行测试。这发生在 Apple 的产品和 Android 上。
  2. 我正在 $(document).ready() 中加载命令
4

1 回答 1

0

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

于 2013-11-12T10:25:11.577 回答