移动端无法显示body背景图与window.alert弹窗求助

核心问题分析与修复 #

1. Alert弹窗不显示：HTML语法错误阻断JS执行 #

代码存在两处关键语法错误，PC浏览器容错性高可忽略，但移动端Chrome对语法错误更严格，会导致JS无法正常执行：

• 第二个<label>内的<span>标签未正确闭合：原代码为<span class ="check"</span>，缺少闭合前的>
• 按钮标签错误：<input type="button">是自闭合标签，无需额外添加</button>闭合标签

2. Body背景图不显示：旧属性兼容性不足 #

<body background="./images/sea.jpg">是HTML4的旧属性，移动端浏览器支持性较差。建议改用CSS的background-image属性设置背景，同时补充适配属性确保显示正常。

完整修复代码 #

<!DOCTYPE html>
<html lang="en">
<head>
<style type="text/css">
.container{
    font-size: 40px;
    color: blue;
    border-radius: 50px;
}
.button{
    background-color: blue;
    color: orange;
    min-height: 40px;
    min-width: 130px;
}
h3{
    color: red;
}
/* CSS设置body背景，兼容性更好 */
body {
    background-image: url('./images/sea.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    min-height: 100vh;
}
</style>
<script type="text/javascript">
function myarray () {
    var s_list = new Array(3);
    s_list[0] = "beginner";
    s_list[1] = "intermediate";
    s_list[2] = "advanced";
    s_list[3] = "professional";
    window.alert(s_list[1]);
}
</script>
<title>Choose Level</title>
</head>
<body>
<h3> Choose your level then tab Click me!</h3>

<label class = "container"> 
<input type="radio" name="radio" checked> Beginner
<span class="check"></span>
</label>
<br>

<label class="container"> 
<input type="radio" name="radio"> Intermediate
<span class="check"></span>
</label>
<br>
<label class="container"> 
<input type = "radio" name="radio"> Advanced
<span class="check"></span>
</label>
<br>
<br>
<input type="button" class="button" value="click me!" onclick="myarray()">

</body>
</html>

额外优化提示 #

• 多个单选框(radio)不能同时设置checked属性，否则仅最后一个会被选中，建议仅给默认选项添加该属性
• 补充完整的<!DOCTYPE html>声明，原代码<!DOCTYPE>不完整可能导致浏览器进入怪异模式

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