javascript - 如何将Google Maps设置为移动/视网膜模式(？)-位置标签难以辨认

当我查看嵌入在移动设备上的地图时，位置标签难以辨认，并且地图的缩小程度远大于maps.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>

最佳答案

据我了解，问题在于在小型设备上，地图上的按钮看起来太小了，问题是由于如何在视口上渲染像素，请查看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>