試圖讓JQVMap在iPhone上正確縮放

我在單頁網站上設置了JQVMap，並試圖讓我的地圖在iphone上正確顯示，但對於我的生活，我可以'弄清楚發生了什麼問題。假設它是響應式的，並且可以「開箱即用」擴展，但是我嘗試了媒體查詢並且在示例頁面上找到了一些調整大小的腳本，但沒有運氣。試圖讓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標籤：

<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圖像/ SVG + XML .SVG

我的iPhone和iPad上運行的IOS 8

來源

2014-10-28 user1959344

喲任何運氣？ – DarthVader 2015-02-15 17:10:31

的的「可擴展性」方面jqvmap插件是指使用矢量圖形。這並不意味着它會自動調整大小或響應改變的視口尺寸。

對於我的一個美國地圖的響應Twitter的引導佈局，其中地圖寬度爲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上視，在縱向和橫向方向。此外，它現在可以響應所有視口大小。

來源

2015-06-16 18:21:28 Matthew3k

儘管我大部分都是這樣工作的，但只要將它包裝到引導行/ etc中，SVG的「寬度」永遠不會改變（藍色），但不是世界SVG請參閱：http://jsbin.com/ puwinivoyu /編輯？HTML，CSS有什麼我失蹤？ – ericpeters 2016-08-01 14:49:56

我剛纔設置的樣式如下：本

<div id="vmap" style="  
    min-width:600px;  
    min-height:600px; 
    margin-left:10px; 
    overflow:hidden;"></div>

來源

2015-07-23 00:56:42 Oleksii

試圖讓JQVMap在iPhone上正確縮放

回答

相關問題