关于移动端两边的黑边解决方案分享经验

rpgmz · 发表于 7 天前

加入我们，或者，欢迎回来。

您需要登录才可以下载或查看，没有帐号？注册会员

x

本帖最后由 rpgmz 于 2025-5-30 14:20 编辑

设置一个壁纸就不会有黑边了壁纸的话可以自定义在PC端 Android端浏览器都是可以正常使用

HTML 代码复制

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

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

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

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

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

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

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

        <title>勇者传说</title>

                <style>

        body {

            /* 移除默认边距 */

            margin: 0;

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

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

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

            background-size: cover;

            /* 背景图片不重复 */

            background-repeat: no-repeat;

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

            background-attachment: fixed;

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

            background-color: #000;

        }

    </style>

    </head>

    <body>

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

    </body>

</html>

<!DOCTYPE html>



<html>



    <head>



        <meta charset="UTF-8">



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



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



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



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



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



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



        <title>勇者传说</title>



                <style>



        body {



            /* 移除默认边距 */



            margin: 0;



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



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



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



            background-size: cover;



            /* 背景图片不重复 */



            background-repeat: no-repeat;



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



            background-attachment: fixed;



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



            background-color: #000;



        }



    </style>



    </head>



    <body>



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



    </body>



</html>

核心代码如下

HTML 代码复制

<style>

        body {

            /* 移除默认边距 */

            margin: 0;

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

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

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

            background-size: cover;

            /* 背景图片不重复 */

            background-repeat: no-repeat;

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

            background-attachment: fixed;

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

            background-color: #000;

        }

    </style>

<style>



        body {



            /* 移除默认边距 */



            margin: 0;



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



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



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



            background-size: cover;



            /* 背景图片不重复 */



            background-repeat: no-repeat;



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



            background-attachment: fixed;



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



            background-color: #000;



        }



    </style>

需要修改index.html文件

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

糜腥珊瑚态耄耋 · 发表于 7 天前

解决了吗如解

rpgmz · 发表于 7 天前

糜腥珊瑚态耄耋发表于 2025-5-27 17:41
解决了吗如解

这只是一个方法罢了个人使用的方法仅供参考

jack99zgp · 发表于 7 天前

设置初始自适应窗口缩放会好一点

小怪兽奇奇侠 · 发表于 7 天前

我心目中的完美效果是地图小的时候有黑边，地图够大画面铺满整个屏幕。退而求其次，你的方法我觉得游戏画面不要居中，而是居右会更好一点（因为大部分人是右撇子），这样空间集中在左边，背景图里可以放一些东西。

rpgmz · 发表于 5 天前

问题已经解决

帐号		自动登录	找回密码
密码			注册会员

[交流讨论] 关于移动端两边的黑边解决方案分享经验

加入我们，或者，欢迎回来。

浏览过的版块