我有一个html页面,我使用twitter bootstrap为响应式布局,我也使用Disqus进行评论。当我最初加载页面时,从我的手机(iPhone 5)中一切都很好,Disqus的容器大小(基本上是屏幕的整个宽度)。当我将手机旋转到横向和背面时,对响应式设计没有任何问题,它会调整大小并按照我想要的方式运行。问题是Disqus初始页面加载后,Disqus iframe无法在我的手机上调整大小。如何重置Disqus的移动方向更改宽度
我想知道是否有一个很好的方式来帮助我调整它调整它的自我。
我有一个html页面,我使用twitter bootstrap为响应式布局,我也使用Disqus进行评论。当我最初加载页面时,从我的手机(iPhone 5)中一切都很好,Disqus的容器大小(基本上是屏幕的整个宽度)。当我将手机旋转到横向和背面时,对响应式设计没有任何问题,它会调整大小并按照我想要的方式运行。问题是Disqus初始页面加载后,Disqus iframe无法在我的手机上调整大小。如何重置Disqus的移动方向更改宽度
我想知道是否有一个很好的方式来帮助我调整它调整它的自我。
做一个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>
感谢您的链接和代码,效果很好。我最终在'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嵌入比例。
device-width
:以像素为单位的装置的宽度。
除上述以外,我没能得到很好的报价离Apple doc pages for Configuring the Viewport(我承认,我没有花很多时间寻找苹果的网站)的,但这里的,总结一个优秀的StackOverflow的答案最多的事情,而很好:
HTML5 Boilerplate: Meta viewport and width=device-width
相关信息:
如果你是专门为iOS设计Web应用程序,那么您的网页所推荐的大小是iOS上可见区域的大小。 Apple建议您将宽度设置为设备宽度,以便纵向方向上的比例为1.0,并且当用户更改为横向时,视口不会调整大小。 [即。视口保留画像装置的宽度,但是缩放或拉伸以呈现给适合风景宽度]
此解决方案可能是不期望的每个人。我碰巧在一个项目上工作,我认为缩放增加了网站的功能(见下面的注释),所以我是一个快乐的露营者。
...关于iOS和initial-scale=1
:
<My2Cents>
当视已经initial-scale=1
定义,我一直困扰在页面如何 “跳” 的时候去/从纵向/横向(在iOS上)让我失去我的位置。
当只定义了width=device-width
时,页面不会在纵向上“跳”到风景旋转,并且我会看到“放大”的放大视图。
就可用性而言,我更喜欢在旋转设备时保留自己的位置,而不得不滚动以查找在旋转设备之前查看的“肖像模式”内容。
在更大的内容更容易阅读方面,还有一些关于放大横向模式的内容。
最后,旋转手机进行缩放比捏缩放更快/更容易! :)
</My2Cents>
我有同样的问题。 Disqus会加载一个iframe,在手机浏览器上设置'
'标签上的'width' CSS属性不会改变。当从横向切换到纵向时,这会在移动设备上软化页面宽度。我无法在桌面上重现此行为,欺骗移动用户代理似乎是获取错误激活的唯一方法。 – Ian 2013-04-30 07:23:39