如何使用放大弹出窗口在移动设备中显示地图？答案

【问题标题】：how to display map in mobile devices using magnific popup?如何使用放大弹出窗口在移动设备中显示地图？
【发布时间】：2014-02-07 15:47:09
【问题描述】：

我有 magnific popup 插件可以在弹出窗口上显示地图，但它在移动设备中无法正常工作。如果我点击它会重定向到谷歌地图页面

这是我的代码

$('.video, .map-link').magnificPopup({
   type: 'iframe',
   mainClass: 'mfp-fade',
   removalDelay: 160,
   preloader: false,
   fixedContentPos: false
});

【问题讨论】：

请提供 .video .map-link div 代码...

标签： magnific-popup

【解决方案1】：

试试这个，

 $('.video, .map-link').magnificPopup({
     type: 'iframe',
     mainClass: 'mfp-fade',
     removalDelay: 160,
     preloader: false,
     fixedContentPos: false,
     iframe: {
         markup: '<div class="mfp-iframe-scaler">'+
                 '<div class="mfp-close"></div>'+
                 '<iframe class="mfp-iframe" frameborder="0" allowfullscreen></iframe>'+
                 '</div>', 
         patterns: {
             gmaps: {
                 index: '//maps.google.',
                 src: '%id%&output=embed'
             }
         },
         srcAction: 'iframe_src', 
     }
 });

【讨论】：

【解决方案2】：

colares 的解决方案对我有用。我还添加了一个媒体查询，因为移动设备上的弹出窗口是一个窄矩形，这使它更宽：

@media screen and (max-width: 875px) {.mfp-container {  
height: 90%;
width: 175%;  
left: -37%; }}

【讨论】：