试图让 JQVMap 在 iphone 上正确缩放

Question

我在单页网站上设置了 JQVMap，并试图让我的地图在 iphone 上正确显示，但对于我的生活，我无法弄清楚出了什么问题。据说它是响应式的，并且会“开箱即用”，但我已经尝试过媒体查询并摆弄我在示例页面上找到的一些调整大小的脚本，但不走运。

我已经根据开发人员页面（http://jqvmap.com/）上的说明设置了我的世界地图 div ，设置了内联宽度和高度。

<div id="vmap" style="width: 600px; height: 400px;"></div>

查看开发人员的页面源代码，他没有设置内联宽度和高度，他希望使用一些脚本来根据他的页面容器设置宽度和高度。

 var map_width = (jQuery('#pages').width());

    if(map_width > 480)
    {
        map_width -= 40;
    }

    jQuery('.map').css({ 'width': map_width + 'px', 'height': (map_width*.75)+ 'px' });
    jQuery('#pages dd, #pages p, #pages div.inner').css({ 'width': map_width + 'px' });  

我是一个完整的脚本新手，但很乐意尝试一些东西，并且我设法获取了 svg 地图以根据容器 div 更改它的宽度和高度，除了它仍然在 iphone 上被切断。

我还尝试使用 css，并在媒体查询中为地图的容器 div 设置了最大宽度和最大高度 - 这不起作用，地图仍然大于容器并被切断。

我有这些元标记用于响应：

<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes" /> 

我在这里缺少什么？根据文档，这似乎应该“开箱即用”重新缩放，当我重新缩放浏览器窗口时，我的地图似乎很高兴 - 为什么它不能在 iphone 上缩放？任何帮助/方向/示例将不胜感激！

我也尝试将它添加到我的 .htaccess 文件中：addtype image/svg+xml .svg

我的 iphone 和 ipad 运行的是 IOS 8。

Answer 1

jqvmap 插件的“可扩展”方面是指它使用矢量图形。这并不意味着它会自动调整大小或立即响应不断变化的视口尺寸。

对于我在响应式 Twitter Bootstrap 布局中使用美国地图（地图宽度是高度的 1.4 倍），我执行了以下操作：

1) 从#vmap 标记中删除内联宽度和高度属性：

<div class="some-parent-element">
  <div id="vmap"></div>
</div>

2) 向您站点的 javascript 文件添加一个函数，该函数采用父元素的宽度并将其分配给 #vmap 宽度：

function sizeMap() {
    var containerWidth = $('.some-parent-element').width(),
        containerHeight = (containerWidth / 1.4);

    $('#vmap').css({
        'width': containerWidth,
        'height': containerHeight
    });
}

3) 在您的文档就绪函数中，调用 sizeMap 函数并再次调整大小：

sizeMap();
$(window).on("resize", sizeMap);

嵌入的地图现在适合 iPhone 视口，纵向和横向。此外，它现在可以响应所有视口尺寸。