如何將谷歌地圖設置爲移動/視網膜模式（？） - 難以辨認的地點標籤

當我查看我在移動設備上嵌入的地圖時，地點標籤難以辨認，地圖比地圖上的地圖縮放得多得多.google.co.uk。我查看了airbnb.com上的地圖進行比較，他們似乎也沒有問題。我究竟做錯了什麼？如何將谷歌地圖設置爲移動/視網膜模式（？） - 難以辨認的地點標籤

注 - 我的測試圖在物理上較小的事實是不相關的;我已經用整頁地圖試過了，文本和其他地圖控件仍然像這裏一樣小而難以辨認。

這裏是我的測試頁：

下面是谷歌：

這裏是我的源：

<html> 
    <head></head> 
    <body> 
    <style>#map { width: 500px; height: 500px }</style> 
    <div id="map"></div> 
    <script src="https://maps.googleapis.com/maps/api/js?v=3.6&libraries=places,geometry&key=[my api key]"></script> 
    <script>var map = new google.maps.Map(document.getElementById("map"), { center: { lat: 53, lng: 1 }, zoom: 11 });</script> 
    </body> 
</html>

來源

2017-05-05 Gus Hogg-Blake

你的風格，迫使你的地圖爲500x500像素。嘗試將其更改爲'#map {width：100％;身高：100％}' – George

@George查看我的編輯 - 注意 - 我的測試地圖實際上體積較小的事實並不相關，我已經用完整頁面的地圖進行了測試，文本和其他地圖控件仍然是這裏小而難以辨認。 –

是啊，我的壞，我現在看到了問題。你可以在頭元素 – George

據我瞭解的問題是與埠出現過小地圖上ttons當在小型設備上，這個問題是由於像素是如何在視口中呈現看看在viewport meta tag

<html> 
<head> 
    <meta name="viewport" content="initial-scale=1.0" /> 
</head> 
<body> 
    <style> 
     #map { 
      height: 100%; 
     } 
    </style> 
    <div id="map"></div> 
    <script src="https://maps.googleapis.com/maps/api/js?v=3.6&libraries=places,geometry&key=AIzaSyCp5RzbQjgID4oHJYe6VRGhKGXpQTGtCmw"></script> 
    <script> 
     var map = new google.maps.Map(document.getElementById("map"), { 
      center: { 
       lat: 53, 
       lng: 1 
      }, 
      zoom: 11 
     }); 
    </script> 
</body> 
</html>

來源

2017-05-05 14:36:32 George

如何將谷歌地圖設置爲移動/視網膜模式（？） - 難以辨認的地點標籤

回答

相關問題