我遇到一个问题，我的网站可以在我的笔记本电脑（chrome / windows）上正确显示，包括在移动模拟器中。但是，.container-top div和.projects div之间还有一个额外的水平空白，显示在我的像素（chrome）和我朋友的iphone / safari上。它确实可以在手机上的Firefox上正确呈现。
这是它在笔记本电脑上的显示方式（正确，向下箭头和第一张图像之间没有空格）：
这是我手机的屏幕截图（不正确-向下箭头和第一张图片之间的空白）：
知道为什么会这样吗？
Link to my test site.
下面的HTML和CSS。
@charset "UTF-8";
@font-face {
font-family: "Tw Cen MT Bold";
src: url("font/TCB_____.TTF");
}
@font-face{
font-family: "Tw Cen MT";
src: url("font/TCM_____.TTF");
}
/* Body */
html {
scroll-behavior: smooth;
margin: 0;
padding: 0;
border: 0;
vertical-align: baseline;
}
body {
font-family: "Tw Cen MT";
background-color: #ddd;
color:#000;
margin: 0;
padding: 0;
font-style: normal;
font-weight: 200;
font-size: 10px;
}
/* Container */
.container {
width: 100%;
margin: 0;
padding: 0;
padding-bottom: 0;
padding-left: 0;
text-align: left;
min-height: 100vh;
}
.container-top {
display: block;
position: static;
height:100vh;
margin:0;
padding:0;
width:100%;
}
.navlinks {
position: absolute;
bottom: 0;
padding: 0;
margin: 0;
z-index: 11;
}
.projects {
display: block;
position: static;
width:100%;
margin:0;
padding: 0;
}
.carousel {
margin: 0px;
margin-top: -0.13em;
margin-bottom: 0.10em;
padding: 0px;
left: 0px;
}
.carousel-cell {
width: 100%;
height: 850px;
padding: 0;
margin:0;
overflow: hidden;
}
.carousel img {
display: block;
margin:0;
margin-right: auto;
height: 100%;
width: auto;
}
.video4to3 {
width: 1145px;
height: 850px;
margin:0;
padding:0;
border: none;
}
.projecttext {
width: 95%;
padding-right: 5%;
font-size: 48px;
letter-spacing: 0.02em;
line-height: 1.146em;
height: 100%;
background-color: #e3e3e3;
}
.about {
padding: 0px;
font-size: 48px;
letter-spacing: 0.02em;
line-height: 1.146em;
width: 90vw;
}
b {
font-family: 'Tw Cen MT Bold';
}
.bigtext {
font-family: 'Tw Cen MT Bold';
position: relative;
white-space: nowrap;
text-overflow: clip;
font-size: 144px;
line-height: 0.64em;
padding: 0px;
margin: 0;
margin-left:-0.07em;
vertical-align: bottom;
z-index: 11;
}
/*.bigtext:hover {
text-decoration:line-through;
text-decoration-style:dotted;
text-decoration-color: cyan;
}*/
.bigtext a {
color: #000;
text-decoration: none;
}
a:hover {
color:#000;
text-decoration:line-through;
text-decoration-style:dotted;
text-decoration-color: cyan;
}
/* Smaller phones */
@media (max-width: 320px) {
.bigtext {
font-size: 31px;
}
.projecttext {
font-size: 12px;
}
.about {
font-size: 12px;
}
.carousel {
margin-top: -0.02em;
margin-bottom: 0.03em;
}
.carousel-cell {
width: 100%;
height: calc( 100vw * 2 / 3 );
}
.carousel-cell img {
height: 100%;
width: auto;
}
.video4to3 {
width: calc( 100vw * 2 / 3 * 4 / 3 );
height: 100%;
}
}
/* big phones / Small Tablets */
@media (min-width: 321px)and (max-width: 767px) {
.bigtext {
font-size: 42px;
}
.projecttext {
font-size: 16px;
}
.about {
font-size: 16px;
}
.carousel {
margin-top: -0.03em;
margin-bottom: 0.05em;
}
.carousel-cell {
width: 100%;
height: calc( 100vw * 2 / 3 );
}
.carousel-cell img {
height: 100%;
width: auto;
}
.video4to3 {
width: calc( 100vw * 2 / 3 * 4 / 3 );
height: 100%;
}
}
/* iPad etc */
@media (min-width: 768px) and (max-width: 1096px) {
.bigtext {
font-size: 72px;
}
.about {
font-size: 30px;
}
.projecttext {
font-size: 30px;
}
.carousel {
margin-top: -0.1em;
margin-bottom: 0.1em;
}
.carousel-cell {
width: 100%;
height: calc( 100vw * 2 / 3 );
}
.carousel-cell img {
height: 100%;
width: auto;
}
.video4to3 {
width: calc( 100vw * 2 / 3 * 4 / 3 );
height: 100%;
}
}<html lang="en-US">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Ultramoderne⸺Architecture⸺Providence RI</title>
<link href="css/ultranew.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="css/flickity.css" media="screen" />
<script src="js/flickity.pkgd.js"></script>
<script src="js/hash.js"></script>
<script>
function swapText(elem, text) {
elem.innerHTML = text;
}
</script>
</head>
<body>
<!-- Main Container -->
<div class="container">
<div class="container-top">
<div class="navlinks">
<div class="bigtext" style="margin-left: -0.045em;">
<a href="about.html">ABOUT</a>
</div>
<div class="bigtext">
<a href="index.html" id="top">PROJECTS</a>
</div>
<div class="bigtext"> </div>
<div class="bigtext"
style="margin-left:-0.01em; margin-top: -0.02em; overflow-y: hidden;
background-image: url('images/down-arrow.svg'); background-repeat: no-repeat;"><a href="#top" style="overflow: hidden; margin:0; padding:0;"> </a>
</div>
</div>
</div>
<div class="projects">
<div class="carousel" data-flickity='{ "cellAlign": "left", "pageDots": false, "draggable": ">1",
"wrapAround": true, "prevNextButtons": false, "hash": true , "lazyLoad": 2 }'>
<div class="carousel-cell" id="p101">
<img data-flickity-lazyload="./images/vacant01.gif" />
</div>
<div class="carousel-cell" id="p102">
<div class='projecttext'>An oversize textile hangs within the industrial warehouse: a floating tabula rasa. The lightweight fabric hangs in a subtle catenary shape, creating new spaces and environments without the construction of a single wall. Monumental voids cut into the fabric lightly define rooms within the larger space, while a careful choreography allows the textile to animate between states twice during the night: from a low—lying plane that clears the space to floating overhead canopy—and back again.<br /><br />Table's Clear was an installation for the Architectural League of New York's Beaux Arts Ball 2016.</div>
</div>
<div class="carousel-cell" id="p103">
<img data-flickity-lazyload="./images/rwp_01.jpg" />
</div>
<div class="carousel-cell" id="p104">
<img data-flickity-lazyload="./images/stl17.jpg" />
</div>
</div>
<div class="bigtext" style="margin-left:-0.02em">
VACANT PROVIDENCE
</div>
<div class="carousel" data-flickity='{ "cellAlign": "left", "pageDots": false, "draggable": ">1",
"wrapAround": true, "prevNextButtons": false, "hash": true , "lazyLoad": 2 }'>
<div class="carousel-cell" id="p201">
<img data-flickity-lazyload="./images/triennial01.jpg" />
</div>
<div class="carousel-cell" id="p202">
<div class='projecttext'>An oversize textile hangs within the industrial warehouse: a floating tabula rasa. The lightweight fabric hangs in a subtle catenary shape, creating new spaces and environments without the construction of a single wall. Monumental voids cut into the fabric lightly define rooms within the larger space, while a careful choreography allows the textile to animate between states twice during the night: from a low—lying plane that clears the space to floating overhead canopy—and back again.<br /><br />Table's Clear was an installation for the Architectural League of New York's Beaux Arts Ball 2016.</div>
</div>
<div class="carousel-cell" id="p203">
<img data-flickity-lazyload="./images/rwp_01.jpg" />
</div>
<div class="carousel-cell" id="p204">
<iframe class="video4to3" src="https://player.vimeo.com/video/152848442?title=0&byline=0&portrait=0" frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe>
</div>
</div>
<div class="bigtext" >
RISD TRIENNIAL
</div>
<div class="bigtext">
<a href="buildings.html" id="top">BUILDINGS</a>
</div>
<div class="bigtext">
<a href="index.html">ULTRAMODERNE</a></div></div></div></body></html>最佳答案
直接从Google开发者的网站上：https://developers.google.com/web/updates/2016/12/url-bar-resizing
问题在于，将高度：100vh赋予非位置元素：fixed将调整元素的大小，就像始终显示滚动条一样。
iOS中似乎也发生了同样的事情：https://medium.com/@susiekim9/how-to-compensate-for-the-ios-viewport-unit-bug-46e78d54af0d