如何在移动方向更改时重置 Disqus 宽度答案

【问题标题】：How to reset Disqus width on mobile orientation change如何在移动方向更改时重置 Disqus 宽度
【发布时间】：2013-04-24 04:30:33
【问题描述】：

我有一个 html 页面，我使用 twitter bootstrap 进行响应式布局，并且我还使用 Disqus 进行 cmets。当我最初加载页面时，从我的手机（iPhone 5）加载一切正常，Disqus 在它的容器中调整大小（基本上是屏幕的整个宽度）。当我将手机旋转到横向和向后旋转时，响应式设计没有问题，它会调整大小并按照我想要的方式运行。问题是 Disqus iframe 在初始页面加载后没有在我的手机上调整大小。

我想知道是否有一个好方法可以帮助 Disqus 调整自身大小。

【问题讨论】：

我遇到了同样的问题。 Disqus 加载一个 iframe，它在移动浏览器上设置 width CSS 属性在 <body> 标签上不会改变。当从横向切换到纵向时，这会限制移动设备上的页面宽度。我无法在桌面上重现此行为，欺骗移动用户代理似乎是激活该错误的唯一方法。

标签： html css mobile twitter-bootstrap disqus

【解决方案1】：

在调整页面大小时重置 Disqus ;)。 http://help.disqus.com/customer/portal/articles/472107-using-disqus-on-ajax-sites

这是我的代码：

<script type="text/javascript">
  var reset_disqus = function(){
    DISQUS.reset({
      reload: true,
      config: function () {  
        this.page.identifier = '{{ article.url }}';
        this.page.url = '{{ SITEURL }}/#!{{ article.url }}';
        this.page.title = "{{ article.title }}";
      }
    });
  };
  var disqus_shortname = '{{ DISQUS_SITENAME }}';
  var disqus_identifier = '{{ article.url }}';
  var disqus_title = '{{ article.title }}';
  var disqus_url = '{{ SITEURL }}/{{ article.url }}';
  (function() {
    var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
    dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
    (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
  })();
  window.onresize = function() { reset_disqus(); };
</script>

【讨论】：

感谢链接和代码，效果很好。我最终在 orientationchange 事件上调用 DISQUS.reset 而不是在 resize 上调用，因为它触发了一次并且只在移动设备上触发。

【解决方案2】：

在这个 Disqus 帮助页面上（也链接到 accepted answer）：

Home › Developers › Using Disqus on AJAX sites

...有这个注释：

请参阅 Github 上的 DISQUS API 食谱库以获取 example DISQUS.reset recipe。

访问了那个仓库后，我决定问这个问题：

disqus / DISQUS-API-Recipes / Issue #7: Disqus resize on orientation change?

这是我的问题（在这里发帖是为了避免其他人不得不点击进入 GitHub）：

问题：

我最近注意到 Disqus 嵌入在我的 iPhone 上在方向更改期间不会调整大小。

问题：

这是预期的行为吗？我假设 Disqus 嵌入应该缩放以适合其容器......这似乎是正确的，除了方向变化。

如果 Disqus 嵌入不能水平向上/向下缩放以适应容器的方向变化，the above Stack answer真的是使 Disqus 嵌入缩放以适应容器大小的最佳方法改变方向？

这里有可以帮助我的 API 配方吗？

这是答案：

这是意料之中的行为 - 我们实际上是这样做的，因为 iOS 上的 Safari 在方向更改期间难以正确调整 iframe 的大小，因此最终获得了更好的体验。

这不是可以通过您的集成来控制的，所以我将关闭它。我们将继续评估替代方案，如果我们找到更好的解决方案，一定会研究它。

可能的解决方案：

使用DISQUS.reset()技术作为@kafran的proposed（和orientationchange事件作为@MichaelReneer的suggested）。
请接受这样一个事实，即在 iOS 上，Disqus 嵌入不会在方向更改时调整大小。
使用您的元视口标签语法（见下文）。

我目前正在使用的解决方法涉及/涉及我更改我的 <meta name="viewport" ... > 从此（传统/标准设置）：

<meta name="viewport" content="width=device-width, initial-scale=1">

...到这个：

<meta name="viewport" content="width=device-width">

仅使用width=device-width，这会使页面在横向更改时缩放，从而避免了Disqus 嵌入缩放的需要。

iOS docs say:

device-width：设备的宽度，以像素为单位。

除了上述之外，我无法从Apple doc pages for Configuring the Viewport 获得好的报价（我承认，我没有花很多时间搜索 Apple 的网站），但这里有一个很好的 StackOverflow 答案总结事情相当不错：

HTML5 Boilerplate: Meta viewport and width=device-width

注意...

...关于 iOS 和 initial-scale=1:

<My2Cents>

当视口定义了initial-scale=1 时，我总是被页面在纵向/横向（在 iOS 上）之间“跳跃”的方式所困扰，这让我失去了自己的位置。

当仅定义 width=device-width 时，页面不会从纵向“跳转”到横向旋转，我会得到一个“更大”的放大视图。

就可用性而言，我更喜欢在旋转设备时保持原位，而不是在旋转设备之前必须四处滚动才能找到我正在查看的“纵向模式”内容。

关于在横向模式下放大更易于阅读的内容，还有一点要说。

最后，旋转手机进行缩放比捏合缩放更快/更容易！ :)

</My2Cents>

【讨论】：