Javascript css媒体查询将地图替换为嵌入图像

我正试图用一个嵌入式移动图像版本来替换我索引页面上的gmap。这张地图在桌面上看起来不错，但当我在手机上查看它时，它太长了，而且由于gmap的原因，滚动到页面的末尾很有挑战性。 我已经在JS上设置了“scrollwheel:false”，修复了桌面上的问题，但在移动设备上仍然不起作用。我还将地图宽度设置为90%，但在手机上，地图看起来仍然很大。因此，我决定一旦屏幕尺寸低于767px，就用嵌入式图像版本替换地图。唯一的问题是，我不知道如何去交换这两个（gmap到图像）。如有任何建议，将不胜感激

有关页面的一些详细信息，将使用RoR的“呈现”来显示

index.html：

<div id="map" class="google-maps">
     <%= render "gmap" %>
</div>

这是最基本的

我建议向上移动，而不是向下移动。或者-把它分开

如果你把地图拉进来。。。但是用一张图片来代替它。。。有点落后。：）

（更新了此链接…）

$（函数（）{
var wWidth=$（window.width（）；
如果（宽度>1200）{
$（'#yo'）。追加（''）
//您可以在这里输入任何代码…：）
}否则{
$（'#yo'）。追加（''）
}
});

---

这也展示了如何对内容使用数据属性-可能不适合这一点-但这会监视更改。

如果您愿意，您可以变得更复杂-并监视调整大小。谢谢sheriffderek。这对于将一个图像文件转换为另一个图像文件非常有用。谷歌地图api嵌入谷歌地图或图像文件怎么样？在屏幕宽度低于767px时，这样的东西能响应并交换吗？我不熟悉您的模板引擎，但这种方法只是一个

if/else

语句-因此，您可以在其中放入任何想要的内容。不确定您的map API需要什么。我会把它丢进一个函数中，然后附加它，而不是像你所拥有的那样包含它。再一次，我想说，

如果窗口不大于767px，请插入图像，否则（767或更大）-添加地图

（我也强烈反对您针对-iPad）

<script type="text/javascript">
    handler = Gmaps.build('Google');
    handler.buildMap({
       provider: {
          scrollwheel: false,
          mapTypeId: google.maps.MapTypeId.HYBRID,
          maxZoom: 64
       },
       internal: {
          id: 'map'
       }
    }, function() {
       markers = handler.addMarkers(<%=raw@hash.to_json%>);
       handler.bounds.extendWith(markers);
       handler.fitMapToBounds()
    });
    handler
</script>

.google-maps {  
    width: 90%; 
    height: 100%; 
    margin: 0 auto;
    position: absolute;
    top:0;
    z-index:1;
}

$(function() {

  var wWidth = $(window).width();

  if (wWidth > 1200) {

    $('#yo').append('<img alt="big image" src="http://placehold.it/1200x800" />')
    // you can put any code in here... : )

  } else {

    $('#yo').append('<img alt="big image" src="http://placehold.it/600x400" />')

  }

});