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

Posted

技术标签:

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

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

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

【问题讨论】：

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

    使用您的元视口标签语法（见下文）。

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

<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 的网站），但这里有一个很好的 *** 答案总结事情相当不错：

HTML5 Boilerplate: Meta viewport and width=device-width

相关资料：

如果您正在为 iOS 专门设计一个 Web 应用程序，那么您的网页的推荐大小是 iOS 上可见区域的大小。 Apple 建议您将宽度设置为 device-width，以便纵向缩放为 1.0，并且当用户更改为横向时不会调整视口大小。 [即。视口保留纵向设备宽度，但会缩放或拉伸以适应横向宽度]

此解决方案可能并不适合所有人。我碰巧正在做一个项目，我认为缩放会增加网站的功能（见下面的注释），所以我是一个快乐的露营者。

注意...

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

&lt;My2Cents&gt;

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

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

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

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

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

&lt;/My2Cents&gt;

【讨论】：

以上是关于如何在移动方向更改时重置 Disqus 宽度的主要内容，如果未能解决你的问题，请参考以下文章

如何更改 disqus 评论的字体

方向/配置更改后如何维护 ListView 片段状态？

使用自动布局更改方向时更改内容顺序

从 UIBarButtonItem 呈现方向更改后，如何防止 UIPopoverController passthroughViews 被重置？

在移动应用程序中实现 disqus

如何让视频在方向更改时自动播放？