布局取决于＆＃34;调整方向＆＃34;

Question

我的响应式布局遇到了一些问题。可以说我有一些中间宽度版本（据说用于手机横向视图），如果在此模式下加载页面，则所有内容都按照需要/设计进行布局。如果用户切换到纵向模式，肖像模式也看起来很好（所有响应的东西都正确应用了所有）。然而，当从纵向切换到横向时，横向布局变得有些混乱。刷新页面可修复所有问题。只需缩小浏览器窗口然后向上缩放即可重现相同内容。因此，这基本上给出了关于页面宽度的非确定性布局。这似乎只出现在webkit浏览器上。所以这似乎是一个浏览器错误...仍然考虑到webkit的流行，我想也许可以做些什么呢？任何人都遇到过类似的问题，如果有的话你是怎么解决的？

Answer 1

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

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

由于只需要从移动肖像到横向更改方向，因此很自然地假设窗口方向更改事件可以正常工作，但WebKit却不会轻易采用创意布局，并且当强制重绘方向更改时，它会找到第三个布局内容的方式...所以我不得不在窗口调整大小事件上绑定重绘，当然是为了防止巨大的性能命中检查仅用于在从移动/纵向宽度更改为平板电脑/横向宽度时重绘页面。