快速破解让 Google 地图在移动设备上看起来不错，对我来说在桌面上工作得很好

Question

我在测试位置页面上嵌入了一个随机的谷歌地图位置。它看起来很好，在桌面上看起来也很好。当我在手机上测试时。地图的右侧位于容器之外，而其他所有内容都留在容器内。有没有办法防止这种情况发生？

是使用google api / JS的唯一方法吗？有没有什么偷偷摸摸的快速小技巧可以解决这个问题？

<div class="container">
    <div class="row">
        <div class="col-12 col-md-6 contact-1">
            <hr>
            <h2 class="logo-font mb-4 text-center">Contact Drum Loot</h2>
            <h5 class="text-muted text-center">Complete our Contact Form below!</h5>
            <hr>
        </div>
        <div class="col-12 col-md-6 contact-2">
            <hr>
            <h2 class="logo-font mb-4 text-center ">Contact Information</h2>
            <h5 class="text-muted text-center">Open 9am-5pm all week!</h5>
            <hr>
        </div>
        <div class="w-100 d-none d-md-block"></div>
        <div class="col-12 col-md-6 contact-3">
            <form method="POST" href="#" class="form mb-2" enctype="multipart/form-data">
                {% csrf_token %}
                {% for field in form %}
                    {{ field | as_crispy_field }}
                {% endfor %}
                    <button class="btn btn-black rounded-0" type="submit">Submit  <i class="fab fa-telegram-plane pl-2"></i></button>
            </form>
        </div>
        <div class="col-12 col-md-6 text-center contact-4">
            <h5>Email: [email protected]</h5>
            <h5>Phone: [phone]</h5>
            <h5>Address: 105 Tilted Towers, California, USA</h5>
            <div id="map">
            <iframe class="googlemap-responsive" 
            src="https://www.google.com/maps/embed?pb=!1m17!1m12!1m3!1d3152.1982920890246!2d-122.28525490832737!3d37.80882413795131!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m2!1m1!2zMzfCsDQ4JzMxLjgiTiAxMjLCsDE2JzQ5LjQiVw!5e0!3m2!1sen!2sie!4v1702042781451!5m2!1sen!2sie" 
            width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
            </div>
        </div>
    </div>
</div>

Answer 1

我也对答案感兴趣，因为我有同样的问题。