Project1

标题: 关于移动端两边的黑边解决方案分享经验 [打印本页]
作者: rpgmz    时间: 2025-5-27 10:49
标题: 关于移动端两边的黑边解决方案分享经验
本帖最后由 rpgmz 于 2025-5-30 14:20 编辑

设置一个壁纸就不会有黑边了 壁纸的话可以自定义 在PC端 Android端 浏览器 都是可以正常使用
HTML 代码复制
  1. <!DOCTYPE html>
    

  2. <html>
    

  3.     <head>
    

  4.         <meta charset="UTF-8">
    

  5.         <meta name="apple-mobile-web-app-capable" content="yes">
    

  6.         <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
    

  7.         <meta name="viewport" content="user-scalable=no">
    

  8.         <link rel="icon" href="icon/icon.png" type="image/png">
    

  9.         <link rel="apple-touch-icon" href="icon/icon.png">
    

  10.         <link rel="stylesheet" type="text/css" href="css/game.css">
    

  11.         <title>勇者传说</title>
    

  12.                 <style>
    

  13.         body {
    

  14.             /* 移除默认边距 */
    

  15.             margin: 0;
    

  16.             /* 设置背景图片（需替换为你的图片路径） */
    

  17.             background-image: url('img/titles1/back1.png');
    

  18.             /* 背景图片全屏覆盖 */
    

  19.             background-size: cover;
    

  20.             /* 背景图片不重复 */
    

  21.             background-repeat: no-repeat;
    

  22.             /* 背景图片固定，不随滚动移动 */
    

  23.             background-attachment: fixed;
    

  24.             /* 背景颜色（可选，用于图片加载失败时的 fallback） */
    

  25.             background-color: #000;
    

  26.         }
    

  27.     </style>
    

  28.     </head>
    

  29.     <body>
    

  30.         <script type="text/javascript" src="js/main.js"></script>
    

  31.     </body>
    

  32. </html>


核心代码如下

HTML 代码复制
  1. <style>
    

  2.         body {
    

  3.             /* 移除默认边距 */
    

  4.             margin: 0;
    

  5.             /* 设置背景图片（需替换为你的图片路径） */
    

  6.             background-image: url('img/titles1/back1.png');
    

  7.             /* 背景图片全屏覆盖 */
    

  8.             background-size: cover;
    

  9.             /* 背景图片不重复 */
    

  10.             background-repeat: no-repeat;
    

  11.             /* 背景图片固定，不随滚动移动 */
    

  12.             background-attachment: fixed;
    

  13.             /* 背景颜色（可选，用于图片加载失败时的 fallback） */
    

  14.             background-color: #000;
    

  15.         }
    

  16.     </style>


需要修改index.html文件

图片分别展示了 PC 浏览器 Android 壁纸全部可以拉伸全屏 不在有黑边

屏幕截图 2025-05-29 141506.png (1.66 MB, 下载次数: 4)

PC端

PC端

屏幕截图 2025-05-29 142327.jpg (400.68 KB, 下载次数: 2)

浏览器端

浏览器端

Screenshot_20250529-143325_勇者传说.jpg (505.46 KB, 下载次数: 3)

Android端

Android端
作者: 糜腥珊瑚态耄耋    时间: 2025-5-27 17:41
解决了吗 如解
作者: rpgmz    时间: 2025-5-27 18:21
糜腥珊瑚态耄耋 发表于 2025-5-27 17:41
解决了吗 如解

这只是一个方法罢了 个人使用的方法 仅供参考
作者: jack99zgp    时间: 2025-5-27 20:51
设置初始自适应窗口缩放会好一点
作者: 小怪兽奇奇侠    时间: 2025-5-27 21:20
我心目中的完美效果是地图小的时候有黑边，地图够大画面铺满整个屏幕。退而求其次，你的方法我觉得游戏画面不要居中，而是居右会更好一点（因为大部分人是右撇子），这样空间集中在左边，背景图里可以放一些东西。
作者: rpgmz    时间: 2025-5-29 14:18
问题已经解决



欢迎光临 Project1 (https://rpg.blue/) Powered by Discuz! X3.1