html - iOS(iPhone 8 Plus)上的网页显示混乱
问题描述
我正在练习网页设计/开发,并在 freecodecamp.org 上完成了一个挑战,您可以在此处找到该页面:https ://codepen.io/VortexFeri/pen/Baoezpm 。
我将链接发送到群聊,有人在 iPhone 8 Plus 上打开了它,然后
他一开始在 Twitter 浏览器中打开它,但他说它在 Safari 上显示完全一样。 <header id="header">
<img src="https://i.imgur.com/Wt78Ado.png" alt="Logo" id="header-img">
<button class="nav-btn-container" onclick="toggle()">
<span class="nav-btn"></span>
</button>
<nav id="nav-bar">
<ul class="nav-list">
<li class="nav-item" data-page="features-section"><a href="#features-section" onclick="toggle()" class="nav-link">Features</a></li>
<li class="nav-item" data-page="video-section"><a href="#video-section" onclick="toggle()" class="nav-link">Unboxing</a></li>
<li class="nav-item" data-page="purchase-section"><a href="#purchase-section" onclick="toggle()" class="nav-link">Purchase</a></li>
<li class="nav-item" data-page="reviews-section"><a href="#reviews-section" onclick="toggle()" class="nav-link">Reviews</a></li>
</ul>
</nav>
</header>
<main>
<section class="hero">
<div class="container">
<h1><span>Watch</span> your step...<br> and your time</h1>
<h2>With this wonderful invention</h2>
<p>From a company that not only creates smartphones, but now also <span>smart</span>watches</p>
<a href="#purchase-section">Buy Now</a>
</div>
</section>
<section id="features-section">
<div class="container">
<div class="carousel">
<a class="carousel-button previous" tabindex="0"><</a>
<div class="carousel-images">
<img src="https://i.imgur.com/DJrrKNi.jpg" alt="Watch Image">
<img src="https://i.imgur.com/eSoFCHu.jpg" alt="Watch Image">
<img src="https://i.imgur.com/u3WMjcv.jpg" alt="Watch Image">
<img src="https://i.imgur.com/YXaVqqK.jpg" alt="Watch Image">
</div>
<a class="carousel-button next" tabindex="0">></a>
</div>
<div class="info">
<div class="info-box battery">
<i class="fa fa-battery-full"></i>
<p>Durable Battery</p>
</div>
<div class="info-box protection">
<i class="fa fa-shield-alt"></i>
<p>Water and dust proof</p>
</div>
<div class="info-box tech">
<i class="fa fa-stopwatch"></i>
<p>Newest technologies</p>
</div>
<div class="info-box design">
<i class="fa fa-clock"></i>
<p>Modern Design</p>
</div>
</div>
</div>
</section>
<section id="video-section">
<div class="container">
<h1>Unboxing</h1>
<p>We sugest watching the following video showing the contents of the product as well as a comprehensive review</p>
<div class="video-container">
<iframe id="video" src="https://www.youtube.com/embed/qK7iSbDpwPs" frameborder="0" allowfullscreen></iframe>
</div>
</div>
</section>
<section id="purchase-section">
<div class="container">
<h1>Buy Now</h1>
<form action="https://www.freecodecamp.com/email-submit" id="form">
<legend>Choose your color:</legend>
<fieldset class="form-color-container">
<input type="radio" name="color" id="black" value="black">
<label for="black"></label>
<input type="radio" name="color" id="silver" value="silver">
<label for="silver"></label>
<input type="radio" name="color" id="rose" value="rose">
<label for="rose"></label>
</fieldset>
<div class="inputs-form-section">
<fieldset class="form-info-container">
<label for="name">
<input type="text" id="name" placeholder="Name" required></label>
<label for="email">
<input type="email" id="email" placeholder="Email" name="email" required></label>
<label for="phone">
<input type="tel" pattern="0[72][2345][0-9]{7}" id="phone" placeholder="Phone Number" required></label>
<label for="adress">
<input type="text" id="adress" placeholder="Adress" required></label>
</fieldset>
<div class="cards-container">
<i class="fab fa-cc-mastercard"></i>
<i class="fab fa-cc-visa"></i>
<i class="fab fa-cc-paypal"></i>
<i class="fab fa-cc-apple-pay"></i>
<i class="fab fa-cc-stripe"></i>
</div>
<fieldset class="form-card-container">
<label for="card-number">
<input type="number" name="card-number" id="card-number" placeholder="Card number"></label>
<div class="date-cvv">
<label for="month">
<input type="month" name="month" id="month"></label>
<label for="cvv">
<input type="number" name="cvv" id="cvv" maxlength="4" placeholder="CVV" min="100"></label>
</div>
</fieldset>
<label for="submit">
<input name="submit" type="submit" id="submit"></input>
<i class="fa fa-shopping-cart"></i>Purchase</label>
</div>
</form>
</div>
</section>
<section id="reviews-section">
<div class="container">
<div class="reviews-count">
<h2><span>4.5 </span>/ 5</h2>
<div class="stars">
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star-half"></i>
</div>
<h3>7 reviews</h3>
</div>
<div class="rev-sort">
<p>Showing <b>1-4</b> out of <b>7</b> reviews</p>
<p>Sorting by: <b>Rate▼</b> Time</p>
</div>
<div class="reviews">
<div class="rev">
<div class="rev-header">
<img src="https://i.imgur.com/1MkxkgC.jpg">
<div class="rev-stars">
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
</div>
<h2>John Smith</h2>
</div>
<h3>Good, really good! I am happy I chose it! :)</h3>
</div>
<div class="rev">
<div class="rev-header">
<img src="https://imgur.com/OEdKQu1.jpg">
<div class="rev-stars">
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
</div>
<h2>Hannah Johns</h2>
</div>
<h3>It is really a good product, although the only downsight is the battery, it doesn't last that long...</h3>
</div>
<div class="rev">
<div class="rev-header">
<img src="https://i.imgur.com/os0ehey.jpg">
<div class="rev-stars">
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
</div>
<h2>Rob Rogers</h2>
</div>
<h3>It's ok, but it could have been better.</h3>
</div>
<div class="rev">
<div class="rev-header">
<img src="https://i.imgur.com/ZhEvFdi.jpg">
<div class="rev-stars">
<i class="fa fa-star"></i>
</div>
<h2>Grumpy "Spoiled" Gregory</h2>
</div>
<h3>I dun lik it, iam a triggered asshole!!! Ahhhhhhhhh, Imma smash my keyboard!!!!!!!!! sjnjdfgnfngkdfbgdngjfdkgbfkbgkdfbsudfffffhfhfahbgihobghfobifobgfhbgsufdhbgsjfhgsjhg</h3>
</div>
</div>
</div>
</section>
</main>
<footer>
<div class="container">
<div class="social">
<i class="fab fa-facebook"></i>
<i class="fab fa-instagram"></i>
<i class="fab fa-twitter"></i>
</div>
<p>©All rights reserved.</p>
</div>
</footer>
解决方案
推荐阅读
- javascript - 如何在 JavaScript 中解析没有基本 URL 的相对 URL
- ansible - Ansible:从一组主机中获取一个变量
- python - sqlite3.InterfaceError:错误绑定参数 2 - 可能是不受支持的类型。nmap 开放端口打印值未存储在 sql 表中给出错误
- python - 为包含特定文本的行过滤数据框列
- html - 创建可以通过 HTML 中的自定义道具更新的动态 Vue 列表
- angular - Angulars 结构指令的确切语法是什么
- bash - /usr/local/bin/vim:无法执行二进制文件:执行格式错误
- r - 通过 selectInput 带引号的绘图选项
- javascript - 使用 Charts.js 的多个数据集的多个标签
- http - 如何使用 Apache-nifi 的 InvokeHttp 处理器发送带有附加文件的 http POST multipart/form-data 请求?