Question

我正在尝试使用flexbox来实现一系列填充视口宽度和高度100％的部分。在调整浏览器窗口大小时，这在桌面上完美运行，没有任何问题。但是，在移动设备上，每当我更改方向时，部分大小调整都无法正确调整。

我已经解决了我的问题：

flexbox css是：

main {
    display: flex;
    flex-flow: row wrap;
}
section {
    display: flex;
    flex: 1 0 100%;
    height: 100vh;
}
article {
    margin: auto;
}

我相信我的实现是正确的......但是我很惊讶看到iOS没有按预期运行。有关解决这个问题的任何建议吗？

谢谢！

Answer 1

原来这是一个iOS 6 - 7错误。更多信息可以在这里找到：

https://github.com/scottjehl/Device-Bugs/issues/36

github问题线程建议使用js插件：

https://github.com/rodneyrehm/viewport-units-buggyfill

对于我的特殊情况，我只是实现了自己的jQuery，它将测量窗口加载时的窗口高度，将该值应用于所有部分，然后在窗口调整大小期间跟踪窗口高度并重新应用。一个不幸的工作:(

var $window      = $(window),
    $sections    = $('section'),
    windowHeight;

function adjustHeight() {

    // get height of browser window on page load and resize events
    windowHeight = $window.height();

    // apply windowHeight to each <section>
    $sections.height(windowHeight);

}

$window.resize(function() {
    adjustHeight();
});

$window.load(function() {
    adjustHeight();
});

Flexbox方向更改宽度/高度问题

1 个答案: