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

我有一个html页面，我使用twitter引导程序进行响应性布局，我还使用Disqs进行评论。当我开始加载页面时，从我的手机（iPhone5）上，所有内容都可以正常加载，并且disks的大小都在它的容器中（基本上是屏幕的全宽）。当我将手机旋转到横向和反向时，响应性设计没有问题，它的大小和行为完全符合我的要求。问题是，在初始页面加载后，我的手机上的Discus iframe无法调整大小

---

我想知道是否有一个好方法可以帮助Discus重新调整它的大小。

在“调整大小”页面上重置Discus；）

这是我的代码：

<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>

var reset_discus=函数（）{
重设({
是的，
配置：函数（）{
this.page.identifier='{{article.url}}}'；
this.page.url='{SITEURL}/#！{{article.url}}'；
this.page.title=“{{article.title}}”；
}
});
};
var discus_shortname='{{discus_SITENAME}}}'；
var discus_标识符={{article.url}}；
var discus_title='{{article.title}}}'；
var discus_url='{{SITEURL}}/{{{article.url}}'；
（功能（）{
var dsq=document.createElement（'script'）；dsq.type='text/javascript'；dsq.async=true；
dsq.src='/'+discus_shortname+'.discus.com/embed.js'；
（document.getElementsByTagName（'head'）[0]| | document.getElementsByTagName（'body'）[0]）.appendChild（dsq）；
})();
window.onresize=function（）{reset_discus（）；}；

在本论文帮助页面上（也链接到中）：

››

。。。有一张便条：

有关详细信息，请参阅Github上的Discus API Recipes repo

参观了该回购协议后，我决定提出以下问题：

//

这里是我的问题（在这里发帖以避免其他人点击GitHub）：

问题: 我最近注意到，在方向改变期间，我的iPhone上的Disqs embed不会调整大小

问题：

这是预期的行为吗？我想这台机器应该能适应它的容器。。。这似乎是真的，除了方向改变

如果Disqs embed没有在方向更改时水平向上/向下缩放以适应容器，那么使Disqs embed缩放以适应方向更改时容器大小的最佳方法是什么

有API配方可以帮助我吗

以下是答案：

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

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

可能的解决方案：

使用@kafran使用的

disqs.reset（）

技术（以及@MichaelReneer使用的

orientationchange

事件）

只要接受这样一个事实，即在iOS上，在方向改变时，Disqs嵌入不会调整大小

使用元视口标记语法（请参见下文）

---

我目前使用的一个解决方案涉及/涉及我从此（传统/标准设置）更改我的

：

。。。为此：

<meta name="viewport" content="width=device-width">

只需使用

width=devicewidth

，页面横向缩放方向就会发生变化，从而避免了需要按比例嵌入DISCS

委员会：

设备宽度

：以像素为单位的设备宽度

除上述内容外，我无法从中获得一个好的报价（我承认，我没有花太多时间搜索苹果的网站），但这里有一个很好的StackOverflow答案，可以很好地概括如下：

有关资料：

如果您是专门为iOS设计web应用程序，则建议您的网页大小为iOS上可见区域的大小。Apple建议将“宽度”设置为“设备宽度”，以便在纵向方向上比例为1.0，并且当用户更改为横向方向时，视口不会调整大小[即，视口保留纵向设备宽度，但缩放或拉伸以适应横向宽度]

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

注意。。。 。。。关于iOS和

初始刻度=1

：

当视口定义了

initial scale=1

时，我总是被页面在进入/离开纵向/横向（在iOS上）时如何“跳跃”而困扰，使我失去了位置

当只定义了

width=devicewidth

时，页面不会在纵向旋转时“跳转”到横向旋转，我会在视图中放大“较大”

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

还有一些关于在横向模式下放大的内容更容易阅读的说法

最后，旋转手机进行缩放比捏动手机进行缩放更快/更容易！：）

---

我也有同样的问题。Discus加载一个iframe，在移动浏览器上，该iframe在

标记上设置了一个不改变的

width

CSS属性。当从横向切换到纵向时，这会影响移动设备上的页面宽度。我无法在桌面上重现这种行为，欺骗移动用户代理似乎是激活bug的唯一方法。感谢链接和代码，效果很好。我最后打电话给迪

<meta name="viewport" content="width=device-width">