布局取决于“调整大小方向”

Question

我的响应式布局存在某些问题。假设我有一些中间宽度版本（假设用于手机横向视图），如果页面以这种模式加载，所有内容都按需要/设计进行布局。如果用户切换到纵向模式，纵向模式看起来也不错（所有响应式的东西都正确应用）。但是，当从纵向切换到横向时，横向布局会有些混乱。刷新页面可以解决所有问题。同样可以通过简单地缩小浏览器窗口然后放大来重现。所以这基本上给出了关于页面宽度的非确定性布局。这似乎只存在于 webkit 浏览器上。所以这似乎是一个浏览器错误......仍然考虑到 webkit 的流行，我想知道也许有什么可以做的吗？可能有人遇到过类似的问题，如果有，您是如何解决的？

Answer 1

因此，在挖掘了一整天并尝试了各种事情之后，比如附加标记以包含布局错误，我设法实现了一个解决方案。即在调整大小时强制重绘，用于强制重绘的代码（在网上某处找到，甚至可能是这样；这里的页面是正文元素）：

document.getElementById('page').style.display='none';
document.getElementById('page').offsetHeight;
document.getElementById('page').style.display='block';

由于这仅用于从移动纵向到横向的方向更改，因此很自然地假设窗口方向更改事件会起作用，但是 WebKit 并没有轻视创意布局，并且当在方向更改时强制重绘时，它会找到第三个布局内容的方式...所以我必须在窗口调整大小事件上绑定重绘，当然为了防止巨大的性能损失检查仅在大小从移动/纵向宽度更改为平板电脑/横向宽度时重绘页面。