盡管實現了CSS媒體查詢并在多種設備上進行測試，但我在某些移動設備上實現我的網站全屏響應有困難。雖然該網站在一些手機上運行良好，但在其他手機上，元素重疊，文本被截斷，按鈕被扭曲，整體布局變得不可用。我需要幫助來確定根本原因以及確保我的網頁跨設備兼容性的潛在解決方案。
代碼:
<!DOCTYPE html>
<html lang='eng'>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>FITIFY || Fitness Tracker</title>
<!--Bootstrap Scripts(CSS)-->
<link rel='stylesheet' integrity='sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65' crossorigin='anonymous'>
<!--Awesome Fonts-->
<script src="https://kit.fontawesome.com/fd6cc398e6.js" crossorigin="anonymous"></script>
<!--Google Fonts-->
<link rel="preconnect" >
<link rel="preconnect" crossorigin>
<link rel="stylesheet">
<!--CSS Styling-->
<style>
h1 {
color: gold;
font-family: 'Open Sans', sans-serif;
font-weight: bolder;
}
h2,
h3 {
color: white;
margin: 6%;
text-align: center;
font-family: 'Instrument Sans', sans-serif;
font-size: 40px;
font-weight: bold;
}
h5 {
background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
a {
text-decoration: none;
color: white;
margin: 3%;
}
.nav-brand {
margin: 1%;
color: white;
}
.btn {
background-color: #19376D;
}
.btn:hover {
background-color: green;
font-weight: bold;
}
.nav-links {
width: 40%;
margin-right: 0%;
}
.dropdown {
display: inline-block;
}
.main-box {
background: linear-gradient(to bottom right, #3d97ce 0%, #12debb 100%);
width: 100%;
height: 500px;
border-bottom: solid black 3px;
margin-top: 7%;
position: relative;
}
.main-text-box {
float: left;
width: 50%;
height: 100%;
}
#main-para {
color: white;
text-align: left;
margin: 2% 2% 2% 10%;
font-size: 22px;
visibility: hidden;
font-weight: 400;
}
.main-image-box {
float: right;
width: 50%;
height: 100%;
}
#main-img {
width: 80%;
height: 80%;
margin: 5%;
border: white solid 3px;
}
#to-features {
background-color: black;
color: white;
border: solid 2.5px;
border-image-slice: 1;
border-image-source: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
width: 10%;
height: 10%;
position: absolute;
margin: 0% 40% 0% 20%;
bottom: 10%;
font-family: 'Instrument Sans', sans-serif;
font-size: 20px;
font-weight: bold;
}
.feature-box {
background: linear-gradient(to top right, #3d97ce 0%, #12debb 100%);
background-size: cover;
height: auto;
}
.card {
color: black;
background-color: white;
width: 21%;
height: 250px;
margin: 14% 2% 10% 2%;
}
.row {
margin-right: 0%;
}
.cards-btn {
background-color: black;
color: white;
border: solid 3px;
border-image-slice: 1;
border-image-source: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
padding: 2%;
margin: 50px 10% 2% 20%;
font-family: 'Instrument Sans', sans-serif;
font-size: 13px;
font-weight: bold;
}
.cards-btn:hover {
color: green;
}
@media screen and (min-width: 300px) and (max-width: 650px) {
/*targets mobile devices */
h1 {
font-size: 1.4rem;
}
h2 {
font-size: 2rem;
margin-bottom: 10%;
}
.nav-brand {
width: 10%;
}
a {
margin: 0.5%;
font-size: 0.7rem;
}
.nav-links {
width: 75%;
}
.btn {
font-size: 45%;
}
.main-box {
margin-top: 12%;
height: 100vh;
}
.main-text-box {
width: 100%;
}
#main-para {
font-size: 1.3rem;
}
.main-image-box {
display: none;
}
#to-features {
width: 40%;
height: 6%;
padding: 1%;
margin: 10% 20% 0% 30%;
bottom: 17%;
}
.card {
width: 60%;
margin: 15% 20% 5% 20%;
}
#goal-btn {
padding: 1%;
margin-left: 10%;
}
}
@media screen and (min-width: 651px) and (max-width: 1200px) {
h1 {
font-size: 3rem;
}
h2 {
font-size: 4rem;
}
a {
margin: 2%;
font-size: 1.5rem;
}
.nav-links {
margin: 0%;
width: 75%;
}
.btn {
font-size: 1.5rem;
margin-right: 1%;
}
.main-box {
margin-top: 8%;
height: 100vh;
}
.main-text-box {
width: 100%;
}
#main-para {
font-size: 40px;
}
.main-image-box {
display: none;
}
#to-features {
width: 30%;
height: 9%;
padding: 1%;
margin: 8% 20% 0% 35%;
}
.card {
width: 30%;
margin: 15% 10% 5% 35%;
}
#goal-btn {
margin-left: 10%;
}
}
@media screen and (min-width: 1800px) and (max-width: 2600px) {
/* 4k */
h1 {
font-size: 6rem;
}
h2 {
font-size: 5rem;
font-weight: bolder;
}
a {
margin: 5%;
font-size: 3rem;
}
.nav-links {
margin: 0%;
width: 55%;
}
.btn {
font-size: 3rem;
margin-right: 10%;
}
.main-box {
margin-top: 6%;
height: 100vh;
}
#main-para {
font-size: 60px;
}
#to-features {
width: 20%;
height: 9%;
padding: 1%;
font-size: 40px;
margin: 10% 0% 0% 15%;
}
.card {
width: 20%;
margin: 15% 10% 5% 35%;
}
.card {
width: 20%;
height: 250px;
margin: 15% 3% 10% 2%;
}
#goal-btn {
margin-left: 10%;
}
}
</style>
</head>
<body>
<header>
<nav class="navbar bg-dark fixed-top" data-bs-theme="dark">
<div class="nav-brand">
<h1>FITIFY</h1>
</div>
<div class="nav-links">
<a href="./index.html">HOME</a>
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
FEATURES
</button>
<ul class="dropdown-menu gap-1 p-2 rounded-3 mx-0 shadow w-220px" data-bs-theme="light">
<li><a class="dropdown-item rounded-2" href="./bmi.html">BMI CALCULATOR</a></li>
<li><a class="dropdown-item rounded-2" href="./calories.html">TRACK CALORIES</a></li>
<li><a class="dropdown-item rounded-2" href="./goal.html">KNOW YOUR GOAL</a></li>
<li><a class="dropdown-item rounded-2" href="./basic_redirect.html">STORE YOUR DETAILS</a></li>
</ul>
</div>
<a href="./about.html">ABOUT US</a>
<a href="./contacts.html">CONTACT US</a>
</div>
</nav>
</header>
<main>
<div class="main-box">
<div class="main-text-box">
<h2>Transform yourself today.</h2>
<p id="main-para">"Welcome to Fitify, your ultimate fitness companion! We are dedicated to helping you on your fitness journey by providing powerful tools to track your progress. With our user-friendly interface achieving your health and fitness goals has never
been easier. Join our community today and take the first step towards a healthier, fitter you!"</p>
<button id="to-features">GET FIT</button>
</div>
<div class="main-image-box"> //This div will be hidden on mobile devices
<img src="./nutri.webp" id="main-img" alt="Display Image">
</div>
</div>
<div class="feature-box">
<div class="row">
<div class="card">
<i class="fa-sharp fa-solid fa-dumbbell"></i>
<div class="card-body">
<h5 class="card-title">CALCULATE YOUR BMI</h5>
<p class="card-text">Calculate your Body Mass Index (BMI) to know your health status right away.</p><br>
<a href="./bmi.html" class="cards-btn">CALCULATE</a>
</div>
</div>
<div class="card">
<i class="fa-solid fa-utensils"></i>
<div class="card-body">
<h5 class="card-title">TRACK YOUR CALORIES</h5>
<p class="card-text">Track your calories for the day and know how much you consumed today.</p>
<a href="./calories.html" class="cards-btn">TRACK NOW</a>
</div>
</div>
<div class="card">
<i class="fa-solid fa-person-dress"></i>
<div class="card-body">
<h5 class="card-title">YOUR IDEAL WEIGHT</h5>
<p class="card-text">Calculate your ideal weight by entering your measurements.</p><br>
<a href="./goal.html" class="cards-btn" id="goal-btn">KNOW YOUR GOAL</a>
</div>
</div>
<div class="card">
<i class="fa-solid fa-info"></i>
<div class="card-body">
<h5 class="card-title">STORE YOUR BASIC DETAILS</h5>
<p class="card-text">Keep a log of your basic information in our secure database.</p>
<a href="./basic_redirect.html" class="cards-btn">STORE DETAILS</a>
</div>
</div>
</div>
</div>
</main>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js" integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha2/dist/js/bootstrap.min.js" integrity="sha384-heAjqF+bCxXpCWLa6Zhcp4fu20XoNIA98ecBC1YkdXhszjoejr5y9Q77hIrv8R9i" crossorigin="anonymous"></script>
<script>
const button = document.getElementById('to-features');
window.onload = function() {
var para = document.getElementById("main-para");
var para_text = para.innerHTML;
var speed = 15;
var i = 0;
para.innerHTML = "";
function typeWriter_para() {
if (i < para_text.length) {
para.innerHTML += para_text.charAt(i);
i++;
setTimeout(typeWriter_para, speed);
}
}
setTimeout(typeWriter_para, 100); // Delay before starting the paragraph animation
para.style.visibility = "visible"; // Make the paragraph visible
};
const feature_box = document.querySelector('.feature-box');
button.addEventListener('click', function() {
feature_box.scrollIntoView();
});
</script>
</body>
</html>