HTML/CSS/JS开发2048游戏部署后移动端响应式异常求助

我使用HTML、CSS和JS开发了一款2048小游戏，在电脑端及通过开发者工具测试响应式时显示完全正常，但部署到线上后，移动端实际显示出现异常。

显示效果对比 #

• 电脑端显示效果：
• 移动端实际显示效果：
• 开发者工具测试效果（显示正常）：

我使用的响应式CSS代码 #

@media  screen and (min-width: 375px ) and (max-width:667px) {    
    body {        
        font-size: 16px; /* Adjust font size for better readability */       
    }    
    hr {        
        width: 80%; /* Adjust hr width to fit the smaller screen */        
        margin: 10px 0; /* Adjust hr margin for better spacing */    
    }    
    #board {        
        margin-top: 10px; /* Adjust board margin for better spacing */        
        width: 209.6px; /* Adjust board width to fit the smaller screen */        
        height: 209.6px; /* Let the board height adjust dynamically */    
    }    
    .title {        
        height: 50px; /* Adjust tile height for better fit */        
        width: 50px; /* Adjust tile width for better fit */        
        font-size: 24px; /* Adjust font size for better fit */        
        border-width: 3px; /* Adjust border width for better fit */        
        font-size: 20px;    
    }    
    .modal-container {        
        width: 150px;        
        height: 150px;        
        font-size: 10px;        
        background-color: #cdc1b5;        
        display: flex;        
        align-items: center;        
        justify-content: center;    
    }
}
@media  screen and (min-width: 360px ) and (max-width:740px) {    
    body {        
        font-size: 16px; /* Adjust font size for better readability */       
    }    
    hr {        
        width: 80%; /* Adjust hr width to fit the smaller screen */        
        margin: 10px 0; /* Adjust hr margin for better spacing */    
    }    
    #board {        
        margin-top: 10px; /* Adjust board margin for better spacing */        
        width: 209.6px; /* Adjust board width to fit the smaller screen */        
        height: 209.6px; /* Let the board height adjust dynamically */    
    }    
    .title {        
        height: 50px; /* Adjust tile height for better fit */        
        width: 50px; /* Adjust tile width for better fit */        
        font-size: 24px; /* Adjust font size for better fit */        
        border-width: 3px; /* Adjust border width for better fit */        
        font-size: 20px;    
    }
}
@media only screen and (device-width: 414) and (device-height: 812px) and (-webkit-device-pixel-ratio: 2)  {    
    /* Adjust styles for iPhone 11 */    
    body {        
        font-size: 16px; /* Adjust font size for better readability */       
    }    
    hr {        
        width: 80%; /* Adjust hr width to fit the smaller screen */        
        margin: 10px 0; /* Adjust hr margin for better spacing */    
    }    
    #board {         
        margin-top: 10px; /* Adjust board margin for better spacing */        
        width: 309.6px; /* Adjust board width to fit the smaller screen */        
        height: 309.6px; /* Let the board height adjust dynamically */    
    }    
    .title {        
        height: 50px; /* Adjust tile height for better fit */        
        width: 50px; /* Adjust tile width for better fit */        
        font-size: 24px; /* Adjust font size for better fit */        
        border-width: 3px; /* Adjust border width for better fit */        
        font-size: 20px;    
    }
}

恳请各位帮忙解决该问题，非常感谢！

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