Question

任何人都可以帮助我，地图右侧有空格，如何解决，我在移动设备上嵌入的Google地图存在问题。如果您在网络服务器中看到我的输出，则地图坐姿不理想，右侧空间太大，这是链接，请检查，我不知道我错了。 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

更新：在index2.html页面中...将iframe div替换为以下代码段中的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宽度为300px ...由于“ col-sm-6 col-md-6”，左侧/右侧的填充为15px ...左侧的填充正在推动固定宽度的iframe在右侧。

所以，您必须做两件事

在div中添加一个soClass类，以封装您要插入的iframe（如下面的代码）
管理宽度小于330像素（下面的代码段）

由于iframe映射固定为300像素，对于屏幕宽度小于300像素的移动设备，将进行水平滚动

@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>

如何为移动设备正确携带我的Google地图移动设备嵌入代码

1 个答案: