移动端Safari键盘按键宽度不响应、部分换行的修复求助

问题描述 #

我开发的键盘在Chrome和Firefox浏览器中显示符合预期，但在移动端Safari浏览器中，按键宽度无法实现响应式适配，始终保持固定宽度，导致部分按键被挤到下一行。请问该如何修复此问题？

原有代码 #

HTML #

<div class="play-area">
    <div id="key-container"></div>
</div>

CSS #

#key-container {
    width: 100%;
    height: 123px;
    background-color: transparent;
    margin: auto;
}

#key-container button {
    height: 35px;
    width: 6%;
    max-width: 55px;
    margin: 3px;
    border-radius: 6px;
    border: none;
    font-size: 1.1rem;
    color: #ffffff;
    background-color: #2525253c;
    outline: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
  
#key-container button:active {
    background-color: #ffffff;
    color: #00c8ff;
}

#key-container button:disabled {
    background: -webkit-linear-gradient(#000000, #00c8ff);
    background-clip: padding-box;
    -webkit-text-fill-color: #ffffff;
}

JS #

function createKeys() {
    const keyboard = document.querySelector("#key-container");
    const keys = [
        "q", "w", "e", "r", "t", "y", "u", "i", "o", "p",
        "a", "s", "d", "f", "g", "h", "j", "k", "l",
        "z", "x", "c", "v", "b", "n", "m"
    ];

    keys.forEach(key => {
        const buttonElement = document.createElement("button");
        const insertLineBreak = ["p", "l"].indexOf(key) !== -1;
        buttonElement.textContent = key;
        buttonElement.setAttribute("id", key);
        buttonElement.addEventListener('click', () => handleClick(key));
        keyboard.appendChild(buttonElement);

        if (insertLineBreak) {
            keyboard.appendChild(document.createElement("br"));
        }
    });
}

修复方案 #

问题根源在于Safari对inline元素的百分比宽度计算、换行逻辑的处理和Chrome/Firefox存在差异，改用Flexbox布局可以彻底解决这个兼容问题，具体修改如下：

修改后的CSS #

#key-container {
    width: 100%;
    height: auto; /* 改为自动适应内容高度 */
    background-color: transparent;
    margin: auto;
    display: flex;
    flex-direction: column;
    gap: 3px; /* 行间距代替br */
    padding: 0 2px; /* 左右留边距防止溢出 */
    box-sizing: border-box;
}

#key-container .key-row {
    display: flex;
    width: 100%;
    gap: 3px; /* 按键间距 */
}

#key-container button {
    height: 35px;
    flex: 1 1 calc((100% - 27px) / 10); /* 第一行10个键，计算扣除间距后的平均宽度 */
    max-width: 55px;
    min-width: 28px; /* 最小宽度防止按键过小 */
    border-radius: 6px;
    border: none;
    font-size: 1.1rem;
    color: #ffffff;
    background-color: #2525253c;
    outline: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box; /* 确保内边距/边框不影响宽度计算 */
}

/* 第二行9个键的宽度适配 */
#key-container .key-row:nth-child(2) button {
    flex: 1 1 calc((100% - 24px) / 9);
}

/* 第三行7个键的宽度适配 */
#key-container .key-row:nth-child(3) button {
    flex: 1 1 calc((100% - 18px) / 7);
}

#key-container button:active {
    background-color: #ffffff;
    color: #00c8ff;
}

#key-container button:disabled {
    background: linear-gradient(#000000, #00c8ff);
    background: -webkit-linear-gradient(#000000, #00c8ff); /* 兼容Safari */
    background-clip: padding-box;
    -webkit-background-clip: padding-box; /* 兼容Safari */
    -webkit-text-fill-color: #ffffff;
}

修改后的JS #

function createKeys() {
    const keyboard = document.querySelector("#key-container");
    // 按行拆分按键，避免用br换行
    const keyRows = [
        ["q", "w", "e", "r", "t", "y", "u", "i", "o", "p"],
        ["a", "s", "d", "f", "g", "h", "j", "k", "l"],
        ["z", "x", "c", "v", "b", "n", "m"]
    ];

    keyRows.forEach(row => {
        const rowDiv = document.createElement("div");
        rowDiv.classList.add("key-row");
        row.forEach(key => {
            const buttonElement = document.createElement("button");
            buttonElement.textContent = key;
            buttonElement.setAttribute("id", key);
            buttonElement.addEventListener('click', () => handleClick(key));
            rowDiv.appendChild(buttonElement);
        });
        keyboard.appendChild(rowDiv);
    });
}

修复说明 #

1. 用Flexbox布局替代inline元素+br的方式，Safari对Flexbox的布局计算更稳定，能保证按键均匀分配宽度
2. 通过calc()结合flex属性，精准计算每行按键的可用宽度，同时设置min-width防止按键在小屏上过度压缩
3. 用gap代替margin，避免边距叠加导致总宽度溢出
4. 补充Safari需要的-webkit前缀属性，确保特殊样式正常生效

内容的提问来源于stack exchange，提问作者Darko Zlatarek