如何使我的谷歌地图嵌入代码为移动设备正确的移动设备

Question

任何人都能帮我吗，地图右侧占用了空间，如何解决这个问题，我的谷歌地图嵌入移动设备有问题。如果你在Web服务器上看到我的输出，地图并没有完全放置，右侧有这么多空间，这是链接，请检查，我不知道我错在哪里了。http://lotusvalue.com/index1.html

<div class="agile-contact1">
<div class="container">
<div class="row">
<div class="col-sm-6 col-md-6" style="padding-left:30px;"><img src="imagesnew/imagelog3.png" class="img-responsive"><br/>
<p>#2112, 3rd Floor, 9th Main, 15th Cross,<br/>
D' Block,Sahakar Nagar Bengaluru - 560092.</p>
</div>
<div class="col-sm-6 col-md-6"><iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3886.6139875875365!2d77.58402861482297!3d13.060225090797745!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3bae1821ca8b1d9f%3A0x8fd257ca32720efd!2sLotus+Value+Developers!5e0!3m2!1sen!2sin!4v1543592662682" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe></div>
</div><!--endofcontainer-->
</div><!--endofrow-->
</div><!--endofagile-->

Answer 1

UPDATE：在您的index2.html页面中。。。将您的iframediv替换为下面代码片段中的2个div；这两个div基本上是这样做的：

1. First div with 500px map which displays on desktop/tablet only and hides in mobile.
2. Second div with 300px map which hides on desktop/tablet and displays only on mobile

你的iframe宽度是300像素。。。由于"col-sm-6 col-md-6"，左/右填充15px。。。左侧的填充将固定宽度iframe推向右侧。

所以，你必须做两件事

1. 在div中添加一个类soClass，封装您需要的iframe(如下面的代码(
2. 对于宽度小于330px(下面的代码片段(

由于iframe映射固定为300px，对于屏幕宽度小于300px的移动设备，将有一个水平滚动

@media screen AND (max-width:330px){
.soClass{
padding: 0;
}
}

<div class="col-sm-6 col-md-6 soClass hidden-md hidden-lg"><iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3886.6139875875365!2d77.58402861482297!3d13.060225090797745!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3bae1821ca8b1d9f%3A0x8fd257ca32720efd!2sLotus+Value+Developers!5e0!3m2!1sen!2sin!4v1543592662682" style="border:0"></iframe></div>
<div class="col-sm-6 col-md-6 hidden-sm  hidden-xs">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3886.6139875875365!2d77.58402861482297!3d13.060225090797745!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3bae1821ca8b1d9f%3A0x8fd257ca32720efd!2sLotus+Value+Developers!5e0!3m2!1sen!2sin!4v1543580574885" width="500" height="250" frameborder="0" style="border:0"></iframe></div>