css - iPhone 8 视口会截断文本，但网站会响应较小的视口
问题描述
这里有点挑战。我正在构建这个站点，但遇到了 iPhone 8 视口的问题。请注意，我在 android 上没有遇到任何问题，并且在桌面上一切正常。我无法使用具有更大视口的 iPhone。我在 safari 和 opera 中测试了 iPhone 上的网站，都遇到了问题。将 iPhone 转为横向时，该站点运行良好。我了解 iPhone 8 的纵向视口为 375 像素。我的 Galaxy S10 的视口宽度为 360 - 我没有问题，所以我不认为这是响应问题。
正如您在图像中看到的，内容似乎向左移动了大约 15%，从而切断了介绍文本容器中的文本。您无法向左滚动来查看它。就好像它被切断和无法访问一样。
网址是：https ://blissful-mahavira-c8737d.netlify.app
这是一个屏幕截图：
图片有几点需要注意：顶部的横幅宽度设置为 100%，但正如您所见，奇怪的是情况并非如此。
您不能缩小，也没有滚动选项。它只是被转移了。
HTML 代码：
<!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" />
<title>Fulham Shoeshine | Bespoke Shoeshine Service in London</title>
<meta
name="description"
content="The best shoeshine service in London. Collection and drop off."
/>
<meta name="robots" content="index,follow" />
<link rel="stylesheet" href="./styles/style.css" />
<link
href="https://fonts.googleapis.com/css2?family=Poiret+One&display=swap"
rel="stylesheet"
/>
<link
href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,400;0,500;0,700;1,400&display=swap"
rel="stylesheet"
/>
</head>
<body>
<!-- NAVIGATION BAR-->
<nav>
<div class="navbar">
<div class="logo-container">
<h1 class="desktop-logo"><a href="#banner">Fulham Shoeshine</a></h1>
<h1 class="mobile-logo"><a href="#banner">FS</a></h1>
</div>
<ul>
<li><a href="#about">About</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#gallery">Gallery</a></li>
<li><a href="#Contact">Contact</a></li>
</ul>
</div>
</nav>
<!-- BANNER SECTION-->
<section id="banner">
<div class="banner-text-container">
<h1>Fulham Shoeshine</h1>
<h2>London's Only</h2>
<h2>Click & Collect Shoeshine Service</h2>
</div>
</section>
<!-- Desktop Quote 1 Section-->
<section id="quote">
<div class="quote-container">
<p>"I needed and urgent service for my shoes after a wedding I
thought was cancelled, due to COVID, was replanned at short
notice. The fact that they could pick up and drop off my
shoes, to meet my schedule, and to my delighted, were
insistent on following social distancing rules, ticked
all the boxes for me. My shoes looked as good as when I
first purchased them too!" - Nathan, London</p>
</div>
</section>
<!-- Intro Section -->
<section id="intro">
<div class="intro-text-container">
<div class="intro-svg-container">
<svg width="433" height="167" viewBox="0 0 433 167" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M430.687 110.296C429.276 109.391 427.51 109.257 425.979 109.93C424.961 105.506 422.822 101.589 419.565 98.235C405.033 83.266 371.167 83.383 346.431 83.467C339.58 83.489 333.665 83.511 329.2 83.213C309.049 81.87 279.224 64.943 270.367 59.666L270.77 54.826C270.909 53.156 270.203 51.528 268.888 50.489C220.204 11.995 180.334 1.03099 178.66 0.583994C176.629 0.040994 174.659 0.967991 173.271 2.54699C160.865 16.661 141.842 31.16 141.736 31.238C119.943 47.307 93.852 51.765 64.186 44.491C41.642 38.963 25.407 28.38 25.249 28.276C23.674 27.235 21.648 27.171 20.012 28.105C18.44 29.003 14.265 31.388 3.585 70.869C-3.538 97.199 1.424 113.797 5.808 122.234C5.51 122.416 3.412 123.903 3.412 126.498V161.484C3.412 164.246 5.651 166.484 8.41199 166.484H120.486C123.247 166.484 125.486 164.246 125.486 161.484V153.892C162.319 154.422 187.506 157.293 211.879 160.234C254.38 165.362 294.257 166.558 296.226 166.558C354.854 166.558 419.504 144.705 431.099 135.48C432.291 134.531 432.986 133.09 432.986 131.567V114.503C432.986 112.801 432.119 111.215 430.687 110.296ZM265.489 98.9C266.587 98.042 267.277 96.764 267.393 95.376L269.446 70.723C281.941 77.882 308.62 91.865 328.534 93.192C333.349 93.512 339.427 93.489 346.464 93.467C368.105 93.389 400.816 93.28 412.389 105.201C414.746 107.628 416.101 110.491 416.521 113.881C401.469 119.852 369.979 131.077 334.378 136.324C323.813 137.881 311.413 138.67 297.525 138.67C271.247 138.67 245.479 135.944 228.428 134.139C225.644 133.844 162.283 126.995 140.344 125.617C160.088 83.97 260.548 99.725 261.606 99.897C262.985 100.121 264.39 99.759 265.489 98.9ZM13.239 73.48C18.726 53.197 22.306 43.66 24.244 39.33C30.89 43.09 44.368 49.884 61.487 54.125C93.766 62.123 123.51 57.03 147.518 39.4C149.607 38.082 158.958 30.944 179.284 11.238C182.517 12.303 188.073 14.288 195.375 17.457L191.045 25.668C189.757 28.11 190.693 31.135 193.136 32.423C193.88 32.815 194.677 33.001 195.464 33.001C197.26 33.001 198.995 32.031 199.891 30.332L204.481 21.627C208.642 23.63 213.166 25.94 217.99 28.587L213.697 37.476C212.496 39.962 213.538 42.952 216.025 44.153C216.726 44.492 217.466 44.652 218.196 44.652C220.054 44.652 221.839 43.612 222.702 41.826L226.697 33.555C230.806 35.991 235.083 38.655 239.492 41.56L235.791 50.729C234.758 53.29 235.996 56.204 238.556 57.238C239.169 57.485 239.803 57.602 240.426 57.602C242.405 57.602 244.278 56.42 245.064 54.473L247.947 47.33C252.075 50.24 256.29 53.346 260.579 56.682L257.866 89.26C234.851 86.267 146.773 78.079 129.761 125.02C121.321 124.597 112.363 124.274 102.728 124.087C55.602 123.176 29.582 122.336 17.422 121.874C16.066 120.348 4.427 106.054 13.239 73.48ZM422.986 128.926C416.409 132.854 399.697 139.323 377.954 145.01C349.476 152.457 320.451 156.559 296.226 156.559C294.344 156.559 250.713 154.363 213.043 150.303C187.271 147.526 160.677 144.162 120.526 143.837C120.512 143.837 120.499 143.837 120.485 143.837C117.816 143.837 115.485 144.653 115.485 148.837V156.484H13.412V131.724C23.674 132.142 50.099 132.473 102.537 134.084C160.379 135.861 224.614 143.789 227.377 144.081C244.637 145.909 270.72 148.669 297.526 148.669C311.9 148.669 324.79 147.845 335.837 146.216C375.118 140.427 408.821 127.884 422.986 122.081V128.926Z" fill="white"/>
</svg>
<hr>
</div>
<p>
Fulham Shoeshine is a bespoke shoeshine service based in
Fulham, London. We operate remotely, offering the only collection and
drop-off shoeshine service in London.
We provide our customers with the convenience of an in-person consultation and collection
from their homes. Using only the finest quality products, we transform
revitalise and transform our customers' leather footwear.
</p>
</div>
<div class="intro-image-container">
<img src="./images/aboutbw.jpg" alt="" />
</div>
</div>
</section>
<!-- About Section-->
<section id="about">
<div class="about-background-container">
<div class="about-text our-story">
<h3>Our Short Story</h3>
<p>Founded in 2020 during the COVID epidemic, Fulham
Shoeshine’s goal is to provide an accessible, convenient
and high-quality shoeshine service to London’s shoe lovers.
Using only the highest quality cremes, waxes and
moisturisers, Fulham Shoeshine offer a range of
service levels to ensure that whatever your reason,
your shoes truly shine. </p>
<p>Founder and head-shoeshiner, Jason Cleaver, has long held
a passion for leather footwear. He developed his
technique over the course of his 10+ years working in the
City of London where he quickly learned that whilst presentation
isn't everything, it certainly helps!
</p>
<p>Regularly complimented on the mirror shine applied to his shoes,
he was often asked how to achieve this. Upon giving advice
it became clear that most people didn't have the time or
enthusiasm to achieve the almost-unobtainable mirror shine. So here we are!
Told you it was short.</p>
</div>
<div class="about-text the-process">
<h3>The Process</h3>
<p>Together, we’ll arrange a time and date for collection at
a location that that works for you, whether that’s your
home, office or wherever you’re most comfortable. </p>
<p>Once booked, you’ll be greeted by one of our shoeshiners
who’ll run you through the service levels we offer and explain
how each will transform your shoes. Once you’ve agreed upon your
bespoke service, you’ll work out a delivery date based
on your availability.</p>
<p>Your shoes are whisked away and we
work our magic. We then return them to you, better than new!
On delivery you’ll also receive shoe care tips on how to
maintain and care for your shoes so that you don’t need
our services too often!</p>
</div>
<div class="about-text why-us">
<h3>Why Us?</h3>
<p>Asides from being the only collect and drop off service in
London you mean?</p>
<p>Well, it can take years of practice to perfect the mirror shine.
Fortunately we've got it down to a T and we'll have those shoes
shining quicker than you can say <em>"Gosh that was quick!"</em>
</p>
<p> Okay, Okay! We know that not everyone wants the shiniest shoes and
we also know that some people <em>need</em> that mirror shine.
We offer a range of services to cover all requirements.</p>
<p>You might have an interview,
perhaps a wedding or even a date (we all know that shoes and
hair make the biggest first impressions, right?!). You have
the perfect pair of shoes but oh no, they’ve definitely seen better days.
Not to worry! We can rebuild almost any leather shoe, returning it to it’s former
glory, and in many cases we make them shine even brighter.</p>
</p>
</div>
</div>
</section>
<section id="services">
<h2>Our Services</h2>
<p>We use Saphir products exclusively. We know from experience
that their range of moisturisers, waxes and cremes achieve the highest possible
shine whilst providing the ultime nourishment and protection for leather
footwear.
<p>It should be mentioned that achieving the ultimate mirror shine is
not always possible as it depends on the quality and condition of the leather.
Don't worry! During your consultation your shoeshiner will evaluate
your footwear and explain just how each of the below services will
restore, revive, transform or even resurrect your beloved shoes.
</p>
</p>
</section>
</body>
</html>
CSS 代码：
* {
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
scroll-behavior: smooth;
}
#intro {
width: 90%;
margin: auto;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.intro-text-container {
-webkit-box-flex: 1;
-ms-flex: 1 1 50rem;
flex: 1 1 50rem;
padding-right: 2.5rem;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
text-align: center;
margin-bottom: 7.8rem;
}
.intro-text-container .intro-svg-container {
-webkit-box-flex: 1;
-ms-flex: 1 1 40%;
flex: 1 1 40%;
padding-bottom: 2rem;
}
.intro-text-container .intro-svg-container svg {
width: 30rem;
}
.intro-text-container .intro-svg-container hr {
margin: 1rem auto;
width: 50rem;
}
.intro-text-container p {
-webkit-box-flex: 1;
-ms-flex: 1 1 60%;
flex: 1 1 60%;
font-size: 3rem;
}
.intro-image-container {
-webkit-box-flex: 1;
-ms-flex: 1 1 50rem;
flex: 1 1 50rem;
padding-left: 2.5rem;
margin-bottom: 7.8rem;
}
.intro-image-container img {
width: 100%;
height: 60rem;
-o-object-fit: cover;
object-fit: cover;
border: 2px white solid;
}
html {
font-size: 62.5%;
}
body {
background: black;
color: white;
-webkit-animation: fade-in 2s ease;
animation: fade-in 2s ease;
}
#top {
display: none;
}
h1 {
font-size: 7rem;
font-family: "Poiret One", cursive;
}
h2 {
font-size: 4rem;
font-family: "Poiret One", cursive;
}
h3 {
font-size: 2rem;
font-family: "Poiret One", cursive;
}
h4 {
font-size: 4rem;
font-family: "Poiret One", cursive;
}
p {
font: 2rem;
font-family: "Montserrat", sans-serif;
}
a {
font-family: "Poiret One", cursive;
}
@-webkit-keyframes fade-in {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes fade-in {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
#banner {
width: 90%;
margin: 7.8rem auto 2rem auto;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
background-image: -webkit-gradient(linear, left top, left bottom, from(transparent), to(black)), url(../images/banner.jpg);
background-image: linear-gradient(transparent, black), url(../images/banner.jpg);
background-size: cover;
background-position: bottom;
height: 50rem;
text-align: center;
}
#banner .banner-text-container h1 {
margin: 1.5rem;
}
#banner .banner-text-container h2 {
margin: 1.5rem;
}
nav {
background: black;
position: fixed;
width: 100%;
z-index: 100;
top: 0;
}
.navbar {
width: 90%;
margin: auto;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.navbar a {
color: white;
text-decoration: none;
padding: 1rem;
font-size: 4rem;
}
.navbar .logo-container {
-webkit-box-flex: 1;
-ms-flex: 1 1 40%;
flex: 1 1 40%;
padding: 1rem;
}
.navbar .logo-container h1 {
font-size: 4rem;
}
.navbar ul {
list-style: none;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-flex: 1;
-ms-flex: 1 1 60%;
flex: 1 1 60%;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
#quote {
font-style: italic;
font-size: 2rem;
width: 100%;
margin: 5rem auto;
background: rgba(255, 255, 255, 0.1);
padding: 2rem;
}
#quote .quote-container {
width: 80%;
margin: auto;
}
#about {
width: 90%;
border-top: white 2px solid;
margin: auto;
}
#about .about-background-container {
background-image: url(../images/aboutcross.jpg);
background-repeat: none;
background-size: cover;
background-position: center;
margin: 7.8rem auto;
height: auto;
border: 2px white solid;
}
#about .about-text {
background-color: rgba(0, 0, 0, 0.5);
padding: 3rem 2rem;
}
#about .about-text h3 {
font-size: 4rem;
margin-bottom: 2rem;
}
#about .about-text p {
font-size: 2.5rem;
margin-bottom: 1rem;
}
#about .our-story {
margin: 2.5rem;
}
#about .the-process {
margin: 2.5rem;
}
#about .why-us {
margin: 2.5rem;
}
@media screen and (min-width: 1921px) {
.navbar,
#banner,
#intro {
max-width: 170.28rem;
}
}
@media screen and (max-width: 1920px) {
#banner {
width: 100%;
}
}
@media screen and (min-width: 1251px) {
.mobile-logo {
display: none;
}
}
@media screen and (max-width: 1250px) {
.desktop-logo {
display: none;
}
#quote {
display: none;
}
}
@media screen and (max-width: 1110px) {
.intro-image-container img {
height: 40rem;
}
.intro-image-container {
padding: 0rem;
}
.intro-text-container {
padding: 0rem;
}
}
@media screen and (max-width: 700px) {
html {
font-size: 40%;
}
#banner {
margin: 6.6rem auto 2rem auto;
}
}
@media screen and (max-width: 460px) {
.navbar ul a,
.mobile-logo {
font-size: 3rem;
}
.intro-svg-container svg {
display: none;
}
}
@media screen and (max-width: 380px) {
html {
font-size: 35%;
}
}
解决方案
推荐阅读
- javascript - 使用 regex machers 加速和简化多个 if/else
- javascript - 基于年月组合的对象组数组
- python - 跨 MRI 切片的最大池化
- java - 在 Java 中将 String 转换为 HashSet
- .net - 如何使用 LabVIEW .NET 构造函数节点在 Grpc.Core.Api.dll 中创建 Channel Credentials 对象？
- variables - 如何在 Pygame 中将输入值存储为变量
- python - 为什么我在 /admin/main/consultation/ 'NoneType' 对象没有属性 'lastname' 处出现 AttributeError 错误
- elixir - 如何将收集分成更小的组 - Elixir
- java - 当方法调用参数很长时，将“）”放在新行上不起作用
- c# - C# 中将字符串作为输入并返回整数的方法