मुझे ऐसा लगता है कि मैंने पहले ही सब कुछ आजमा लिया है। वेबसाइट मेरे लैपटॉप पर, क्रोम वेब डेवलपर टूल में, आईफोन 6/7/8 प्लस, आईफोन एक्स, आईपैड और आईपैड प्रो (इसलिए 667 पीएक्स से ऊपर की कोई भी ऊंचाई) की जांच करते समय ठीक दिखती है, मेरी सामग्री कट रही है, पाद लेख गायब हो जाता है और आधा अंतिम पृष्ठ iPad पर चला गया है।

मुझे पता है कि यह ऊंचाई है, अगर मैं ऊंचाई संपत्ति को 5000px की तरह मूर्खतापूर्ण तरीके से बदलता हूं और फिर निश्चित रूप से मेरी सामग्री वहां है, लेकिन मेरे पास अन्य मोबाइल उपकरणों पर बहुत सारी सफेद जगह है, इसलिए यह स्पष्ट है कि यह समाधान नहीं है।

आईफोन 6 जैसे डिवाइस पर यह कैसा दिखता है - बिल्कुल सामान्य

यहाँ मुझे ihone X पर मिलता है - पाद लेख goooone है :(

यह रहा कोडपेन: https://codepen.io/DiteIkporo/pen/vYOmMdK

यहाँ मेरा सीएसएस कोड है

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
:root {
    --primary: #ddd;
    --dark: #002a3a;
    --light: #fff;
    --shadow: 0 3px 5px #000000;
    --logo-color: #00b0b9;
    --header-color: #3b89b9;
    --btn2: #293857;
    --grey: #6f7a90;
    --shadow2: 0 0 8px #000000; 
}
ul {
list-style: none;
}
a {
text-decoration: none;
}
.container {
width: 80%;
margin: 0 auto;
}
body{
font-family: arial, helvetica, sans-serif;
line-height: 1.6;
}
header {
padding: .5rem 2rem;
align-items: center;
width: 100%;
margin: 0;
background: var(--btn2);
box-shadow: var(--shadow);
position: sticky;
top: 0;
z-index: 1;
}

header #navbar{
  display: flex;
  justify-content: space-between;
}


#header-img{
width:8rem;
margin-left: -1rem;
}

#navbar ul{
display: flex;
}
#navbar ul li {
padding: 10px;

}
#navbar a{
color: var(--light);
text-transform: uppercase;
}

#navbar a:hover{
color: #eee;
font-weight: bold;
}
.product{
margin: 0;
background: url('../img/product.jpg') center center/cover;
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
color: var(--light);
padding: 0 20px;

}
.product input{
padding: 0.3rem;
display: block;
margin: 0.9rem auto;
}
.product input#email{
width: 300px;
border-radius: 5px;
}
.product h1{
  text-transform: uppercase;
  font-size: 5rem;
  line-height: 1.2;
}
.btn1 {
font-size: 1.2rem;
border-radius: 10px;
border: 1px #fff solid;
background: transparent;
color: var(--light);
}
.btn1:hover{
  cursor: pointer;
}
.features {
  background: url('../img/blue-close-up.jpg') center center/cover;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--light);
  padding: 2rem;
}
.box {
  background: var(--btn2);
  opacity: 0.9;
  text-align: center;
  padding: 2rem;
  box-shadow: var(--shadow);
  margin: 1rem;
}
.box p{
padding: 0.3rem;
margin-bottom: 0.5rem;
}
.btn2 {
  font-size: 1rem;
  color: var(--light);
  background-color: transparent;
  border: solid #fff 1px;
  border-radius: 5px;
  padding: 0.5rem;
}
.pricing{
  background: url('../img/blue-sky.jpg') center center/cover;
  height: 100vh;
  display: flex;

  justify-content: center;
  align-items: center;
  color: var(--light);
  padding: 2rem;
}
.level{
  background: var(--header-color);
  opacity: 0.9;
  text-align: center;
  padding: 2rem;
  box-shadow: var(--shadow);
  margin: 1rem;
  }

.level p{
padding: 0.3rem;
margin-bottom: 0.5rem;
}
.btn3 {
  font-size: 1rem;
  color: var(--light);
  background-color: transparent;
  padding: 0.5rem;
  border-radius: 5px;
  border: #fff solid 1px;
  cursor: pointer;
}
.video {
  background:url('../img/blue-close-up.jpg');
 background-size: cover;
 min-height: 100vh;
 align-items: center;
 display: flex;
 align-items: center;
}
.block > iframe{
  max-width: 560px;
  width:100%;
  box-shadow: var(--shadow);
}
.block{
  /* background: var(--btn2); */
  text-align: center;
  /* box-shadow: var(--shadow); */
  margin: auto;
 width: 50%;
 padding: 40px;
 color: var(--light);
}
.block h2{
  padding-bottom: 1.3rem;
}
.footer{
  text-align: end;
  padding: .5rem .5rem;
  background: var(--btn2);
  box-shadow: var(--shadow2);
  position: relative;
}
.footer ul{
  display: flex;
  justify-content: flex-end;

}
.footer ul li{
  margin-left: 1rem;
}
.footer ul li a{

  color: var(--light);
}
.footer a:hover{
  color: #eee;
font-weight: bold;
}
.footer span{
  color: var(--light);
}
.price{
  font-size: 2.5rem;
}

और यह मेरा mobile.css है

#navbar{
        flex-direction: column;
        align-items: center;
    }
    .product h1{
        font-size: 3rem;
    }
    .features{
        flex-direction: column;
        padding:0;
    
    }
    .features h2{
        font-size: 1rem;
    }
    .features p{
        font-size: 0.8rem;
        margin-bottom:0.2rem;
    }
    .box{
        padding: 0.6rem;
        margin: 1rem 2rem;
    }
.btn2{
    padding: 0.3rem;
}
    .pricing{
        flex-direction: column;
        padding: 0;
    }
    .level{
        padding:0.5rem;
        margin: 1rem 2rem;
    }
    .level p{
        padding:0.1rem;
        margin-bottom:0.2rem;
        font-size: 0.8rem;
    }
    .price {
        font-size: 1rem;
    } 
    .btn3{
        padding:0.3rem;
    }
    .block {
        padding: 10px;
        width:80%;
      }

यह मेरा एचटीएमएल है

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>DI Tech</title>
    <script src="https://kit.fontawesome.com/fa769308d4.js" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="css/styles.css">
    <link rel="stylesheet" media="screen and (max-width: 768px)" href="css/mobile.css">
    <link rel="stylesheet" media="screen and (min-width: 1100px)" href="css/widescreen.css">
</head>
<body>
   <header id="header">
        <nav id="navbar" class="main-nav">
            <div class="logo">
        <img id="header-img" src="img/fitbit-logo.png" alt="Fitbit logo">
        </div>
        
            <ul>
                <li><a class="nav-link" href="#Product">Product</a></li>
                <li><a class="nav-link" href="#Features">Features</a></li>
                <li><a class="nav-link" href="#Pricing">Pricing</a></li>
            </ul>
        </nav>   
    </header>
   
        <section id="Product" class="product">
        <h1>The future of tech is here</h1> 
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Similique quibusdam, perspiciatis animi repellendus eum officiis amet obcaecati debitis, quidem facere quasi repellat ab laboriosam eius nesciunt non autem natus porro! Enim tempora quod sit laudantium!</p>
        <form action="https://www.freecodecamp.com/email-submit" method="POST" id="form">
            <input id="email" name="email" type="email" required placeholder="Enter Your Email...">
            <input id="submit" type="submit" value="Subscribe" class="btn1"/>
            </form>
        </section>
 
        <section id="Features" class="features">
            <div class="box">
            <i class="fas fa-cogs fa-2x"></i>
            <h2>Lorem, Ipsum.</h2>
            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Iusto perferendis ad necessitatibus magni obcaecati aperiam temporibus, quis odio iure.</p>
            <a href="#" class="btn2">Read More</a>
            </div>
            <div class="box">
            <i class="fas fa-user-friends fa-2x"></i>
            <h2>Lorem, Ipsum Dolor.</h2>
            <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Reprehenderit ab beatae suscipit ipsam nulla voluptatibus nisi aut nam tempore veniam?
            </p>
            <a href="#" class="btn2">Read More</a>
            </div>
            <div class="box">
            <i class="fas fa-chart-line fa-2x"></i>
            <h2>Lorem, Ipsum.</h2>
            <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Magnam amet quisquam tenetur? Exercitationem accusantium aliquid nesciunt.</p>
            <a href="#" class="btn2">Read More</a>
            </div>
        </section>
        <section id="Pricing" class="pricing">
         <div class="option">
             <div class="level">Standard
             <h2 class="price">£79</h2>
             <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quisquam quas eaque laboriosam praesentium amet nihil, aliquam nulla quasi necessitatibus inventore.</p>
             <button class="btn3">Select</button>
             </div>
            </div>       
            <div class="option">
                <div class="level">Pro
                <h2 class="price">£109</h2>
                <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quisquam quas eaque laboriosam praesentium amet nihil, aliquam nulla quasi necessitatibus inventore.</p>
                <button class="btn3">Select</button>
                </div>
            </div>
            <div class="option">
                <div class="level">Ultra
                <h2 class="price">£159</h2>
                <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quisquam quas eaque laboriosam praesentium amet nihil, aliquam nulla quasi necessitatibus inventore.</p>
                <button class="btn3">Select</button>
                </div>
            </div>
        </section>
          <div class="video">
              <div class="block">
          <h2>Watch our most recent ad here</h2>
            <iframe width="560" height="315" src="https://www.youtube.com/embed/KTZH4Upbv4w?controls=0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
              </div>  
        </div>

    <div class="footer">
    <footer>
        <ul>
            <li><a href="#">Privacy</a></li>
            <li><a href="#">Terms</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
        <Span>DI Tech, Copyright &copy; 2019</Span>
    </footer>
    </div>
 <!-- JQuery CDN -->
 <script
 src="https://code.jquery.com/jquery-3.4.1.min.js"
 integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
 crossorigin="anonymous"></script>
 <!-- Local JS File -->
   <script src="js/main.js"></script>
</body>
</html>
2
Dite Ikporo 28 फरवरी 2020, 23:30
2
क्या आप स्क्रीनशॉट में पेज का HTML भी प्रदान कर सकते हैं?
 – 
zgood
28 फरवरी 2020, 23:37
संपादित और जोड़ा गया html
 – 
Dite Ikporo
29 फरवरी 2020, 00:08

2 जवाब

मेरा सुझाव है कि आप अपनी बेहतर मदद करने के लिए अपने केस के लिए एक पेन बनाएं। http://codepen.io/

0
Ziad Darwich 28 फरवरी 2020, 23:38
2
यह कोई उत्तर नहीं है, बल्कि एक टिप्पणी है। और हाँ, मुझे पता है कि आप शायद अभी तक टिप्पणियाँ पोस्ट नहीं कर सकते।
 – 
zgood
28 फरवरी 2020, 23:40
अगर मैंने आपको परेशान किया हो तो मुझे खेद है, लेकिन मैं मदद करने की कोशिश कर रहा था। क्या आप अपने केस के लिए पेन बना सकते हैं?
 – 
Ziad Darwich
29 फरवरी 2020, 00:00

जहां तक ​​​​मैं कह सकता हूं, देव उपकरण में एक बग प्रतीत होता है। मुझे अपने विकास में भी यह समस्या हुई है और मुझे लगा कि यह मेरी गलती है। लेकिन आज फिर से इसका सामना करने के बाद, मैंने इस पर कुछ और गौर करने का फैसला किया। मैं 3 प्रतिष्ठित वेबसाइटों पर गया हूं, जैसे। स्टैक ओवरफ्लो, जीमेल और फ्रीकोडकैंप, और आईफोन एक्स को देव टूल्स में चुना ताकि यह देखा जा सके कि उन्हें भी यह समस्या है या नहीं।

लो और देखो, वे सब करते हैं। आप संबंधित पृष्ठों के बहुत अंत में सामग्री को मुश्किल से ही बना सकते हैं, और यदि आप ऊपर और फिर नीचे स्क्रॉल करते हैं तो आप यह भी देख सकते हैं कि वहां और भी सामग्री है जो दिखाई देनी चाहिए लेकिन बस नहीं है।

तो हाँ, व्यक्तिगत विकास दोष नहीं, मुझे नहीं लगता।

1
Jorge 1 सितंबर 2020, 18:58