Question

我对谷歌地图地图的大小有疑问我想要的是100％宽度的地图和div段。见图：

如您所见，它适用于计算机。但它没有响应宽度，这就是问题所在。

CSS：

    #map_canvas { // the map
        height:600px;width:800px;
    }
    .google_map {
        position:relative;
        float: left;
    }
    .paragraph { // text and stuff on the right
        float: left;
        padding-left:5px;
        display: inline;
    }

HTML

<div class="google_map">
<div id="panel"> 
  <div ><input onclick="deleteMarkers();" type=button value="Rensa"></div>
</div>
<div id="facit"></div>

<div id="map_canvas"></div>
</div>

<div class="paragraph">
    blablabla
</div>

如果我将map_canvas的宽度更改为100％，则结果为~100像素我试图创建一个div，其中包含map_canvas和宽度为100％的段落，然后将地图的宽度设置为XX％，但这又被解释为xx px。

因为地图宽度为800像素，所以在手机上使用起来非常困难，如果这是一个解决方案，那么map_canvas在手机上方的段落上面没有问题。
总之，我需要在计算机上宽度为800px，在手机上为100％。

编辑：

#map_canvas {
    width:100%;
    min-height:600px;
}

成为：

编辑：
CSS面板

 #panel {
        position: absolute;
        top: 10px;
        left: 65%;
        margin-left: -180px;
        z-index: 5;
        background-color: #000;
        padding: 5px;

    }
    #panel, .panel {
        font-family: 'Roboto','sans-serif';
        line-height: 20px;
        padding-left: 5px;
      }

      #panel select, #panel input, .panel select, .panel input {
        font-size: 15px;
      }

      #panel select, .panel select {
        width: 100%;
      }

      #panel i, .panel i {
        font-size: 12px;
    }

    #panel2 {
        position: absolute;
        top: 10px;
        left: 73%;
        margin-left: -180px;
        z-index: 5;
        background-color: #000;
        padding: 5px;

    }
    #panel2, .panel {
        font-family: 'Roboto','sans-serif';
        line-height: 20px;
        padding-left: 5px;
      }

      #panel2 select, #panel2 input, .panel select, .panel input {
        font-size: 15px;
      }

      #panel2 select, .panel select {
        width: 100%;
      }

      #panel2 i, .panel i {
        font-size: 12px;
    }

面板是您在图像上看到的按钮，Panel2是在地图上单击一次时出现的按钮，位于第一个按钮的右侧。

Answer 1

试试这个：

#map_canvas {
        width:100%;
        min-height:600px;
}

希望得到这个帮助。

Answer 2

您可以在CSS中使用CSS3 @media标记。包括您可以根据设备的屏幕大小设置地图宽度的那些。如果要确定使用哪个设备，请仔细查看this站点。您可以定义特定规则，之后将包含CSS的某些部分，具体取决于您在文件中定义的条件。包含此内容后，您的css文件可能如下所示：

@media (max-width: 800px) {
    #map_canvas{
        /*youre custom style for devices which have a maximum 
          screen size of 800px and therefore 
          can not display your map correctly*/
    }
}

您可以在this网站上阅读有关此主题的更多信息。

请注意，您还可以在<link>标记中加入媒体标记，如下所示：

<link rel="stylesheet" type="text/css" media="only screen and (max-device-width: 800px)" href="small-device.css" />

有关详情，请参阅this网站。

确定使用哪种设备的另一种方法是使用jQuery，JavaScript或PHP。由于目前的移动设备浏览器应该能够使用CSS3，我建议使用媒体标签。

如何使谷歌地图地图移动友好？

2 个答案: