Question

我有一个html页面，我使用twitter bootstrap进行响应式布局，我也使用Disqus进行评论。当我最初加载页面时，从我的手机（iPhone 5）开始，所有内容都很好，并且在它的容器中大小有问题（基本上是屏幕的整个宽度）。当我将手机旋转到横向和背面时，响应式设计没有任何问题，它会根据我的需要调整大小和行为。问题是在初始页面加载后，我的手机上没有调整Disqus iframe的大小。

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

Answer 1

页面调整大小时重置了;）。 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>

Answer 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的大小，因此这最终会带来更好的体验。

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

可能的解决方案：

@kafran使用DISQUS.reset()技术作为proposed（@MichaelReneer将orientationchange事件作为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>

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

2 个答案:

问题：

问题：

可能的解决方案：

注意......