如何在引导模式的桌面版网站中预览移动网站 <iframe>答案

【问题标题】：How to preview mobile site in <iframe> in desktop version of site in bootstrap modal如何在引导模式的桌面版网站中预览移动网站 <iframe>
【发布时间】：2018-02-15 04:48:23
【问题描述】：

我想在桌面版中显示移动版网站。基本上我们有 2 个网站 m.xyz.com 和 xyz.com ，现在我想要通过单击预览在桌面上显示 m.xyz.com 。

<script>
$('#preview_feature').click(function() {

            $('.faqModal').on('shown.bs.modal',function(){     

              $(this).find('iframe').attr('src','https://m.xyz.com/abc')
            })
              $('.faqModal').modal({show:true})
            })
    </script>

    //On click of this button i am showing model which will preview mobile version of website 
    <button type="button" id="preview_feature" class="btn btn-info btn-lg btn"  >Preview Feature</button>

    <!-- Modal -->
      <div class="modal fade faqModal" id="faqModal" role="dialog">
        <div class="modal-dialog">
          <!-- Modal content-->
          <div class="modal-content">
            <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal">&times;</button>
              <h4 class="modal-title">Preview</h4>
            </div>
            <div class="modal-body">
              <iframe style="width:940px;height:560px;-webkit-transform:scale(1);-moz-transform-scale(1);"></iframe>
              </iframe>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
          </div>  
        </div>
      </div>

【问题讨论】：

您的移动网站是否支持 940px 的宽度？
@AniruddhAgarwal 基本上问题是因为我试图在网站中预览移动网站页面。所以如果我要删除宽度或者我会给出一些其他的宽度我没关系。是否有可能在桌面上加载移动网站？
是的，如果您将 iframe 的宽度固定在一定程度上等于它可以显示移动网站的移动分辨率，则可以在桌面上加载移动网站。 @SumitNair
我尝试做同样的事情，但它仍然重定向到 www.abc.com 。我们可以更改 iframe 的用户代理吗？这样它就会打开 m.abc.com @AniruddhAgarwal
您可以在 abc.com 中使用 js 设置，如果窗口大小小于 500px 或其他东西，它应该重定向到 m.abc.com

标签： javascript jquery codeigniter iframe bootstrap-modal

【解决方案1】：

看到这对我有用：

<!DOCTYPE html>
<html>
    <body>
        <iframe src="https://en.m.wikipedia.org/wiki/Main_Page" width="400px" height="500px">
        </iframe>
    </body>
</html>

请尝试减小宽度，这样如果它使用适当的 js 进行移动平台重定向，那么它将正常工作。

【讨论】：

当然我会尽力让你知道
@SumitNair 我会等待您的反馈，以便在这方面开展更多工作。
仍然无法正常工作，我想我应该尝试更改 USERAGENT @aniruddh Agarwal
m.abc.com 也是你的？
我在问您是您尝试在 iframe 中访问的那个网站的所有者吗？