CSS媒体查询用嵌入图像替换地图

Question

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

关于页面的一些细节，它正在使用 RoR 的“渲染”显示。

index.html：

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

_gmap.html：

<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>

gmap.css

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

Answer 1

这是基础...

我建议向上移动，而不是向下移动。或者 - 只是拆分它...

如果您拉入地图...但随后将其替换为图像...这有点落后。 :)

（已更新此链接...） http://codepen.io/sheriffderek/pen/lLwgk/

$(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" />')

  }

});

http://codepen.io/sheriffderek/pen/azOyQV

这也展示了如何将数据属性用于东西 - 可能不适合这个 - 但它会关注变化。