如何将谷歌地图设置为移动/视网膜模式（？） - 难以辨认的地方标签答案

【问题标题】：How to set google maps to mobile/retina mode (?) - illegible place labels如何将谷歌地图设置为移动/视网膜模式（？） - 难以辨认的地方标签
【发布时间】：2017-05-05 14:10:36
【问题描述】：

当我查看我在移动设备上嵌入的地图时，地点标签难以辨认，而且地图的缩小程度比在 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>

【问题讨论】：

您的风格迫使您的地图为 500x500 像素。尝试将其更改为#map { width: 100%; height: 100% }
@George 查看我的编辑 - 注意 - 我的测试地图在物理上更小这一事实不相关，我已经尝试使用整页地图并且文本和其他地图控件仍然存在像这里一样小而难以辨认。
是的，我的错，我现在看到了问题。可以在头部元素中添加<meta name="viewport" content="initial-scale=1.0">吗
啊，解决了，谢谢！而且airbnb确实有这个标签，所以我猜他们也是这样做的。将不得不做一些阅读。

标签： javascript android google-maps mobile

【解决方案1】：

据我了解，问题在于地图上的按钮在小型设备上显得太小，问题在于像素在视口上的呈现方式，请查看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>

【讨论】：