Tapak web saya dipaparkan dengan baik pada desktop tetapi tidak pada skrin mudah alih
Saya mereka laman web peribadi saya menggunakan HTML/CSS. Tetapi teks itu tidak berskala ke telefon. Sila rujuk gambar di bawah.
Tapak web kelihatan hebat pada desktop, tetapi tidak dipaparkan dengan baik pada peranti mudah alih.
Paparan mudah alih
Benaman Google Drive saya tidak muat pada skrin telefon saya. Paparan telefon mudah alih GGD PDF dibenamkan
Apakah yang perlu saya lakukan untuk menyelesaikan masalah ini? Terima kasih banyak-banyak.
Ini kod saya:
HTML
<!DOCTYPE html>
<html>
<head>
<title>EXAMPLE</title>
<meta charset="UTF-8"
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="author" content="Hoa Dang">
<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=DM+Sans:wght@400;500;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/projects.css">
<link rel="stylesheet" href="css/nav.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css">
<link rel="shortcut icon" type="image/x-icon" href="EXAMPLE"/>
<link rel="manifest" href="manifest.json">
<style>
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&display=swap');
</style>
</head>
<body>
<nav>
<input type="checkbox" id="chk">
<label for="chk" class="show-menu-btn">
<i class="fas fa-bars"></i>
</label>
<ul id="nav-ul">
<li class="nav-li">
<a class="nav-link selected">HOME</a>
</li>
<li class="nav-li">
<a class="nav-link">ABOUT</a>
</li>
<li class="nav-li">
<a class="nav-link">CV</a>
</li>
<li class="nav-li">
<a class="nav-link">PROJECTS</a>
</li>
<label for="chk" class="hide-menu-btn">
<i class="fas fa-times"></i>
</label>
</ul>
</nav>
<div id="HOME">
<div class="center">
<h1 id="main-header">EXAMPLE</h1>
<h3 id="sub-header">example.com <span class="green-detail">&</span> example.com</h3>
</div>
</div>
<div id="CV">
<div class="center">
<iframe src="example.com" width="640" height="480" allow="autoplay"></iframe>
</div>
</div>
<div id="PROJECTS" class="center">
<div id="img-container"></div>
</div>
<div id="ABOUT">
<div class="center">
<h2 id="about-header">example.comE<span class="green-detail">:</span></h2>
<p id="about-text">
<br> Text
<br> <br>
</p>
</div>
</div>
<footer>
<ul id="sm-ul">
<li class="sm-li">
<a class="sm-logo" href="example.com" target="_blank">
<i class="fab fa-youtube"></i>
</a>
</li>
<li class="sm-li">
<a class="sm-logo" href="example.com" target="_blank">
<i class="fab fa-instagram"></i>
</a>
</li>
<li class="sm-li">
<a class="sm-logo" href="example.com" target="_blank">
<i class="fab fa-facebook"></i>
</a>
</li>
<li class="sm-li">
<a class="sm-logo" href="example.com" target="_blank">
<i class="fab fa-linkedin"></i>
</a>
</li>
</ul>
</footer>
</body>
</html>
CSS
* { padding: 0; margin: 0; }
:root {
--base-color: #d2dae2;
--secondary-color: #0be811;
}
body {
background-color: #1e272e;
font-family: 'DM Sans', sans-serif;
color: var(--base-color);
overflow: scroll;
}
body::before{
content: '';
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
background-image: url("example.com");
background-size: cover;
background-position: top-center;
opacity: 0.2;
filter: blur(7px);
}
nav, footer, #about-text, #contact-container {
width: 100%;
}
nav {
margin-top: -30px;
position: fixed;
top: 0;
text-align: right;
z-index: 2;
}
footer {
position: fixed;
bottom: 0;
padding: 5vh;
}
#about-text, #sub-header {
font-size: 2.3vh;
line-height: 1.6;
font-weight:400;
}
#main-header, #sub-header {
text-align: center;
}
#main-header {
font-size: 8.5vh;
}
#nav-ul {
padding-right: 5vh;
}
#sm-ul, #nav-ul {
list-style-type: none;
}
#about-header {
font-size: 4vh;
font-weight: bold;
}
.center, #contact-container {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 0;
}
.sm-logo {
color: var(--base-color);
font-size: 3vh;
transition: 0.2s ease-in;
}
.sm-logo:hover, .nav-link:hover, .nav-link.selected, .green-detail {
color: var(--secondary-color);
}
.sm-li {
display: inline-block;
margin-left: 5vh;
}
.nav-link {
font-size: 1.8vh;
cursor: pointer;
text-decoration: none;
transition: 0.2s ease-in;
}
.nav-li {
display: inline-block;
margin: 5vh 5vh 0 0;
}
@media screen and (max-width: 650px) {
nav, footer, #nav-top, #nav-ul, .nav-link {
padding: 0;
margin: 0;
}
#sm-ul, #nav-ul {
text-align: center;
}
.sm-li {
margin: 0 2vh 5vh 2vh;
}
.nav-li {
margin: 5vh 2vh 0 2vh;
}
}