将宽度和高度设置为响应式谷歌地图？

Question

为了能够查看 Google 地图，我必须将高度设置为像素值。我可以将宽度设置为 100%，它几乎是响应式的，但不是高度。我以为我可以根据不同的媒体查询设置不同的高度值，但这不起作用。任何想法如何解决这个问题。我只想在移动设备上使用较小的高度，在桌面上使用更大的地图。

我使用的 CSS：

#map-canvas
{
width: 100%;
height: 200px;
}

Answer 1

媒体查询完美运行。

@987654321@

尝试用里面的地图调整窗口大小。

Answer 2

你可以使用 java Script 或 jQuery 像这样

var wi = window.innerWidth;
var he = window.innerHeight;
$('#map-canvas').css('width',wi+'px');
$('#map-canvas').css('height',he+'px');