6

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

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

4

2 回答 2

7

在页面调整大小时执行 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>
于 2013-05-18T22:10:21.957 回答
3

在这个 Disqus 帮助页面上（也链接到接受的答案）：

主页›开发人员›在 AJAX 网站上使用 Disqus

...有这个注释：

请参阅 Github 上的 DISQUS API Recipes repo 以获取示例 DISQUS.reset recipe。

在访问了那个 repo 之后，我决定问这个问题：

disqus / DISQUS-API-Recipes /问题 #7：Disqus 在方向改变时调整大小？

这是我的问题（在此处发布以使其他人不必点击进入 GitHub）：

问题：

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

问题：

  1. 这是预期的行为吗？我假设 Disqus 嵌入应该缩放以适合其容器......这似乎是真的，除了方向变化。
  2. 如果 Disqus 嵌入不能水平向上/向下缩放以适应容器的方向变化，那么上面的 Stack 答案 真的是使 Disqus 嵌入比例适应容器大小以适应方向变化的最佳方法吗？

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

这是答案：

这是预期的行为——我们实际上是这样做的，因为 iOS 上的 Safari 在方向更改期间难以正确调整 iframe 的大小，因此这最终是一种更好的体验。

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

可能的解决方案：

  1. 使用@kafran 提出的技术DISQUS.reset()（以及@MichaelReneer建议的事件）。orientationchange

  2. 只需忍受 Disqus 嵌入在 iOS 上不会在方向更改时调整大小的事实。

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

我目前正在使用的解决方法涉及/涉及我改变我<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 文档说：

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

除了上述之外，我无法从Apple 文档页面中获得关于配置视口的良好报价（我承认，我没有花很多时间搜索 Apple 的网站），但这是一个很好的 StackOverflow 答案把事情做得很好：

HTML5 样板：元视口和宽度=设备宽度

相关资料：

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

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

笔记 ...

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

<My2Cents>

定义视口initial-scale=1后，我一直对在进出纵向/横向（在 iOS 上）时页面如何“跳跃”感到困扰，这让我失去了自己的位置。

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

在可用性方面，我更喜欢在旋转我的设备时保持我的位置，而不是在我旋转我的设备之前必须滚动才能找到我正在查看的“肖像模式”内容。

就更大的内容更易于阅读而言，关于放大横向模式还有一些话要说。

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

</My2Cents>

于 2013-12-11T20:29:45.090 回答