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

我有一个html页面，我使用twitter bootstrap为响应式布局，我也使用Disqus进行评论。当我最初加载页面时，从我的手机（iPhone 5）中一切都很好，Disqus的容器大小（基本上是屏幕的整个宽度）。当我将手机旋转到横向和背面时，对响应式设计没有任何问题，它会调整大小并按照我想要的方式运行。问题是Disqus初始页面加载后，Disqus iframe无法在我的手机上调整大小。如何重置Disqus的移动方向更改宽度

我想知道是否有一个很好的方式来帮助我调整它调整它的自我。

来源

2013-04-24 Michael Reneer

我有同样的问题。 Disqus会加载一个iframe，在手机浏览器上设置''标签上的'width' CSS属性不会改变。当从横向切换到纵向时，这会在移动设备上软化页面宽度。我无法在桌面上重现此行为，欺骗移动用户代理似乎是获取错误激活的唯一方法。 – Ian 2013-04-30 07:23:39

做一个Disqus重置页面resize;）。 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-18 22:10:21 kafran

感谢您的链接和代码，效果很好。我最终在'orientationchange'事件上调用了DISQUS.reset，而不是在'resize'上，因为它触发了一次，并且仅在移动设备上触发。 – 2013-05-19 05:51:08

在此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配方可以帮助我吗？

这里的答案：

这是正常现象 - 我们实际上这样做是因为Safari浏览器在iOS上有困难适当调整我们的过程中方向变化的iframe，所以这最终成为一个更好的体验。

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

可能的解决方案：

由@kafran（和orientationchange事件作为suggested通过@MichaelReneer）使用DISQUS.reset()技术为proposed。
只是因为Disqus嵌入的事实无法在iOS上调整方向更改。
玩您的元视口标签语法（见下文）。

目前我使用的一个解决方法涉及/参与我改变我的<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（我承认，我没有花很多时间寻找苹果的网站）的，但这里的，总结一个优秀的StackOverflow的答案最多的事情，而很好：

HTML5 Boilerplate: Meta viewport and width=device-width

注...

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

<My2Cents>

当视已经initial-scale=1定义，我一直困扰在页面如何 “跳” 的时候去/从纵向/横向（在iOS上）让我失去我的位置。

当只定义了width=device-width时，页面不会在纵向上“跳”到风景旋转，并且我会看到“放大”的放大视图。

就可用性而言，我更喜欢在旋转设备时保留自己的位置，而不得不滚动以查找在旋转设备之前查看的“肖像模式”内容。

在更大的内容更容易阅读方面，还有一些关于放大横向模式的内容。

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

</My2Cents>

来源

2013-12-11 20:29:45 mhulse

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

回答

问题：

问题：

可能的解决方案：

注...

相关问题