当 Safari/iPad 将文本大小放大到超过 175% 时，布局会出错

Question

我在 iPad Pro 12.9" 上使用 Safari。当我使用浏览器的调整大小控件将所有内容扩展至 200% 时，h1 会跳到其包含块之外，到达徽标下方的位置。

用于垂直居中对齐的技术取自How do I Vertical Center text with CSS? - 本文声称该技术对于多行文本应该仍然有效，但我还没有尝试过。

CSS 和 Html：

header  {
/* header [ [ logo ] [ h1 ] ]; */
/* https://stackoverflow.com/questions/8865458/how-do-i-vertically-center-text-with-css */
    height: 122px;  /* 122 x 122 logo */
    line-height: 122px;
    margin: 10px 0 12px;
    border: 0;
    padding: 0;
    }

header
h1  {
    display: inline-block;
    vertical-align: middle;
    line-height: normal;
    font-size: 46px;
    font-style: normal;
    }

#logo-image
    {
    text-align: left;
    /* 122 x 122 */
    background: url("logo.jpg") top left no-repeat;
    width: 122px;
    height: 122px;
    display: block;
    float: left;
    margin: 0 24px 0 4px;
    }

/* === XHTML === */
<header>
    <span id="logo-image" />
    <h1>
        Skye Shepherd Huts
    </h1>
</header>

Answer 1

我认为这不是布局出错，而是实际上按照当前设置和可用空间进行了预期的操作。您已将徽标向左浮动，但容器（标题）是一个内联块元素，当溢出时它将换行。

在我看来，链接解决方案的最佳答案相当过时，第二个答案是更现代的方法：https://stackoverflow.com/a/22218694/2440595.

将容器设置为

flex

并禁用换行将实现我认为您想要的效果，但请注意，如果您不为较小尺寸/较大尺寸的徽标或徽标文本添加灵活性，它可能会导致其他问题变焦。