我正在尝试设计一个我将在 iOS 中使用的页面。 问题是 Chrome（桌面）正确显示它：https://flycalm.me/2/ 在电话里，一团糟。即使在 iOS 版 Chrome 上，它也显示得很糟糕。 Android 很有魅力。 这是iOS的截图：https://flycalm.me/2/error.png
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/style.css" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css"
integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
/>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700;800;900&display=swap"
rel="stylesheet"
/>
<title>AI Writing Tool | Home</title>
</head>
<body>
<header>
<div class="container">
<a href="index.html" class="logo">
<img src="images/logo.png" alt="Logo" />
</a>
<div class="toggle">
<i class="fa-solid fa-moon"></i>
</div>
</div>
</header>
<main>
<section>
<div class="cards">
<a href="#" class="card">
<div class="icon purple">
<img src="images/chatbot.png" alt="Chat" />
</div>
<h4>Chat</h4>
<span class="try">Try Now</span>
</a>
<a href="#" class="card">
<div class="icon red">
<img src="images/template.png" alt="Templates" />
</div>
<h4>Templates</h4>
<span class="try">Try Now</span>
</a>
<a href="#" class="card">
<div class="icon green">
<img src="images/translate.png" alt="Translate" />
</div>
<h4>Translate</h4>
<span class="try">Try Now</span>
</a>
<a href="#" class="card">
<div class="icon purple">
<img src="images/file.png" alt="Summarizer" />
</div>
<h4>Summarizer</h4>
<span class="try">Try Now</span>
</a>
<a href="#" class="card">
<div class="icon red">
<img src="images/document.png" alt="Artice" />
</div>
<h4>Article</h4>
<span class="try">Try Now</span>
</a>
<a href="#" class="card">
<div class="icon green">
<img src="images/text.png" alt="Text" />
</div>
<h4>Improve Text</h4>
<span class="try">Try Now</span>
</a>
</div>
</section>
</main>
<script type="text/javascript">
const toggle = document.querySelector(".toggle");
let clicked = false;
toggle.addEventListener("click", () => {
document.body.classList.toggle("dark");
clicked = !clicked;
clicked
? (toggle.innerHTML = `<i class="fa-solid fa-sun"></i>`)
: (toggle.innerHTML = `<i class="fa-solid fa-moon"></i>`);
});
</script>
</body>
</html>
这是CSS：
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
color: var(--title);
text-decoration: none;
text-align: center;
}
html {
scroll-behavior: smooth;
}
:root {
--dark-bg: #343541;
--dark-card: #40414f;
--white: #fff;
--red: #ff7364;
--purple: #3639a4;
--green: #75e8f0;
--title: #302f5b;
}
body {
background: var(--white);
}
body.dark {
background: var(--dark-bg);
}
body.dark .card {
background: var(--dark-card);
}
body.dark .card h4 {
color: var(--white);
}
img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
}
header {
padding: 20px 0;
background: var(--purple);
}
.container {
margin: 0 250px;
display: -webkit-box;
display: -webkit-flex;
display: -webkit-flexbox;
display: -moz-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
justify-content: space-between;
align-items: center;
}
.logo img {
display: block;
height: 40px;
width: 40px;
width: fit-content;
}
.toggle {
cursor: pointer;
}
.toggle i {
font-size: 30px;
color: var(--white);
}
section {
padding: 50px 0;
margin: 0 250px;
}
h1 {
margin-bottom: 20px;
text-align: left;
}
.cards {
display: -ms-grid;
display: grid;
display: -webkit-grid;
grid-template-columns: repeat(4, 1fr);
-ms-grid-columns: 1fr 1fr 1fr 1fr;
-webkit-grid-template-columns: repeat(4, 1fr);
gap: 20px;
}
.card {
background: var(--white);
padding: 20px;
border-radius: 10px;
display: flex;
flex-direction: column;
align-items: center;
gap: 20px;
border: 1px solid rgba(0, 0, 0, 0.03);
box-shadow: 4.871px 34.659px 30px 0px rgb(0 0 0 / 6%);
}
.icon {
width: 90px;
height: 90px;
border-radius: 50%;
border: 1px solid transparent;
display: grid;
place-content: center;
}
.icon img {
width: 40px;
height: 40px;
}
.purple {
border-color: var(--purple);
}
.red {
border-color: var(--red);
}
.green {
border-color: var(--green);
}
.card h4 {
font-size: 25px;
font-family: 600;
}
.try {
color: var(--red);
transition: all 0.5s ease-in-out;
}
.try:hover {
color: var(--title);
}
@media (max-width: 1500px) {
section,
.container {
margin: 0 150px;
}
}
@media (max-width: 1200px) {
section,
.container {
margin: 0 100px;
}
}
@media (max-width: 991px) {
section,
.container {
margin: 0 50px;
}
}
@media ((max-width: 767px)) {
section,
.container {
margin: 0 15px;
}
.cards {
display: -webkit-box;
display: -webkit-flex;
display: -webkit-flexbox;
display: -moz-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
flex-direction: column;
gap: 20px;
}
}
有人可以帮我吗？
我尽了一切努力让它工作......真的需要帮助