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

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像素。
我试图创建一个保存map_canvas和宽度为100％的段落的div，然后将地图的宽度设置为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，我建议使用媒体标签。