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

css media queries replace map with embed image

本文关键字：图像 替换 map 媒体 查询 css      更新时间：2023-09-26

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

关于页面的一些细节，它是使用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.ss

.google-maps {  
    width: 90%; 
    height: 100%; 
    margin: 0 auto;
    position: absolute;
    top:0;
    z-index: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

这也展示了如何对内容使用数据属性——也许不适合这样——但这会观察变化。

相关文章：