iPhone浏览器中Pac-Man游戏精灵渲染异常问题求助

• 问题现象：修改Pac-Man项目时，游戏在iPhone的Safari、Chrome浏览器中渲染异常，但macOS、iPadOS端的Safari和Chrome显示正常；用Chrome DevTools模拟iPhone尺寸测试无异常，实际iPhone加载时地图生成出错。
• 预期效果：移动设备上正常生成完整的Pac-Man游戏地图
• 异常效果：iPhone端地图元素错乱、布局偏移，无法正常显示游戏地图

相关信息 #

• 源码仓库：GitHub上的dominikgorczyca/Pac-Man项目
• 在线Demo：可通过GitHub Pages访问该游戏

地图生成相关CSS代码 #

#game-board {
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
    width: 56rem;
    height: 62rem;
    display: grid;
    grid-template-columns: repeat(28, 2rem);
}
/* GAME BOARD GENERAL */

#game-board > * {
    position: relative;
    box-sizing: border-box;
    width: 2rem;
    height: 2rem;
}

#start, #game-start {
    position: absolute;
    margin: auto;
    width: 100%;
    top: 54%;
    text-align: center;
    color: yellow;
    font-size: 2.4rem;
    z-index: 1;
    user-select: none;
}

/* OBJECTS AND WALLS  */
.wall {
    background-image: url("map.png");
    z-index: 1;
}
@media (max-width: 600px), (max-height: 700px) {
    .wall {
        background-image: url("small_map.png");
    }
}

.blank {
    background-color: black;
}

.wall > * {
    box-sizing: border-box;
    background-color: black;
    display: block;
    position: relative;
    width: 1.5rem;
    height: 1.5rem;
    border: .2rem solid #161693;
    border-radius: 80%;
    z-index: 1;
}

.point,
.big-point {
    box-sizing: border-box;
    width: 2rem;
    height: 2rem;
    background-color: #ffb897;
    border-radius: 0;
    z-index: 10;
}

.point {
    border: .8rem solid black;
}

.big-point {
    border: .4rem solid black;
    border-radius: 45%;
    background-color: #ffb897;
}
.gate {
    background-color: #ffb897;
    border-top: .7rem solid black;
    border-bottom: .7rem solid black;
}

解决方案建议 #

1. 修复Viewport设置 #

iPhone浏览器默认会缩放页面，需在HTML头部添加正确的viewport标签，禁止自动缩放：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

2. 统一rem单位适配逻辑 #

iOS对rem的计算存在差异，添加根元素基准font-size，确保移动端换算一致：

html {
    font-size: 62.5%; /* 1rem=10px，简化计算 */
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

@media (max-width: 600px) {
    html {
        font-size: 50%; /* 根据iPhone屏幕尺寸调整基准值 */
    }
}

3. 优化Grid布局兼容性 #

iOS Safari对固定尺寸的Grid布局支持存在问题，改用弹性布局逻辑：

#game-board {
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
    width: 100vw;
    max-width: 56rem;
    height: auto;
    aspect-ratio: 56/62; /* 保持游戏板宽高比 */
    display: grid;
    grid-template-columns: repeat(28, 1fr); /* 自动分配列宽 */
}

#game-board > * {
    position: relative;
    box-sizing: border-box;
    width: 100%;
    height: 0;
    padding-bottom: 100%; /* 保持单元格正方形 */
}

4. 完善媒体查询适配 #

补充移动端游戏板和背景图的适配规则：

@media (max-width: 600px), (max-height: 700px) {
    .wall {
        background-image: url("small_map.png");
        background-size: cover; /* 背景图适配单元格 */
    }
    #game-board {
        max-height: 90vh; /* 限制高度避免超出屏幕 */
    }
}

5. 禁用iOS触摸高亮 #

消除iPhone触摸元素时的默认高亮效果：

* {
    -webkit-tap-highlight-color: transparent;
    tap-highlight-color: transparent;
}

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