各位，感谢您的帮助，我将简要介绍我的工作：我正在为大型和小型设备建立一个网站。(电脑和手机或计算机的小屏幕，无论什么…(。
在计算机上，它显示：通过计算机查看网站(可以！(。
我的代码：
*{
padding: 0;
margin: 0;
}
body {
background: linear-gradient(
to right,
yellow 0%,
yellow 40%,
black 41%,
black 59%,
purple 60%,
purple 100%
);
display: flex;
justify-content: center;
text-align:center;
overflow-y: hidden;
overflow-x: hidden;
}
div.header {
text-shadow: 2px 2px red;
outline:5px dotted red;
border-radius: 1000px;
background: hsl(0 0% 100%);
outline-offset:0px;
max-width:550px;
margin: auto;
margin-top: 200px;
display: flex;
justify-content: center;
}
h1 {
font-size:clamp(1rem, 0.8rem + 3vw, 3rem);
margin: 5px;
}
.wrapper {
min-height:100vh;
display: flex;
flex-direction:column;
justify-content:space-around;
align-items:center;
max-width: 550px;
}
.top {
width: 100%;
display: grid;
}<html>
<head>
<title>New Game.io</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="wrapper">
<div class="top">
<div class="header">
<h1>New Game.io</h1>
</div>
</div>
</div>
</body>
</html>我被困在上的是什么？在手机/小屏幕上，它显示：通过手机/小屏幕查看网站(这不太好！(。
我的目标：根据设备屏幕扩展的颜色(包括中间的黑色(。
黑色条纹需要与h1的宽度相同(加上一点填充和轮廓(，因此此片段将其作为h1上的before伪元素，同时使线性渐变背景仅为两种颜色。
黑色"条纹"将覆盖黄色和紫色所需的内容。
<html>
<head>
<title>New Game.io</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* {
padding: 0;
margin: 0;
}
body {
background: linear-gradient( to right, yellow 0%, yellow 50%, purple 50%, purple 100%);
display: flex;
justify-content: center;
text-align: center;
overflow-y: hidden;
overflow-x: hidden;
}
div.header {
text-shadow: 2px 2px red;
outline: 5px dotted red;
border-radius: 1000px;
background: hsl(0 0% 100%);
outline-offset: 0px;
max-width: 550px;
margin: auto;
margin-top: 200px;
display: flex;
justify-content: center;
}
h1 {
font-size: clamp(1rem, 0.8rem + 3vw, 3rem);
margin: 5px;
position: relative;
}
h1::before {
content: '';
position: absolute;
background: black;
width: calc(100% + 14px);
height: 200vh;
top: -100vh;
left: -7px;
z-index: -1;
}
.wrapper {
min-height: 100vh;
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
max-width: 550px;
}
.top {
width: 100%;
display: grid;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="top">
<div class="header">
<h1>New Game.io</h1>
</div>
</div>
</div>
</body>
</html>删除标签可能会对您有所帮助！
只需移除标签：
<meta name="viewport" content="width=device-width, initial-scale=1.0">