如何解决放大后才能在手机上看到背景图片
我无法在手机上显示CSS背景图像。我的网站在桌面上可以正常运行并且响应良好,但是当我实际从设备(iPhone 11 Pro)访问该网站时,背景图像直到我实际捏放大页面然后显示后才显示(仅显示白色)向上。初始缩放手势后,我可以刷新页面,并且页面将正确加载,因此似乎缩放手势会将其捕捉到其他内容中。
这是我的网站:https://yuvalashkenazi.com/stackoverflow/mobile-height/
此问题是由以下代码引起的,但我将其包含在内,因为否则,即使高度设置为100%或100vh,移动浏览器的网站底部也会有白色填充。
html {
height: 100%;
position: fixed;
}
以下是完整的HTML和CSS:
@font-face {
font-family: 'Hello';
src: url('hello.otf') format('opentype')
}
html {
height: 100%;
position: fixed;
}
body {
overflow: hidden;
font-family: 'Hello',sans-serif;
color: white !important;
vertical-align: middle;
width: 100vw !important;
height: 100%;
margin: 0;
-webkit-text-size-adjust:none;
-ms-text-size-adjust:100%;
-moz-text-size-adjust:none;
text-size-adjust:none;
padding: env(safe-area-inset);
Box-sizing: border-Box;
}
a {
color: white !important;
text-decoration: none !important;
cursor: pointer;
}
.section {
width: 100vw;
height: 100vh;
overflow: hidden;
Box-sizing: border-Box;
}
.section--1 { background: url('1.jpg'); background-size: cover; background-repeat: no-repeat;}
.section--2 { background: url('2.jpg'); background-size: cover; background-repeat: no-repeat;}
.section--3 { background: url('3.jpg'); background-size: cover; background-repeat: no-repeat;}
/*img {
width: 31vw;
position: fixed;
right: 80px;
top: 50%;
transform: translateY(-50%);
}
.middle {
font-size: 16pt;
line-height: 18pt;
position: absolute;
left: 80px;
top: calc(50vh + 2.8vmax);
transform: translateY(-50%);
}*/
.middle {
position: absolute;
bottom: 47vh;
transform: translateY(50%);
/*bottom: 38.5vh;
transform: translateY(20%);*/
}
.left {
float: left;
width: 40%;
}
.right {
float: right;
width: 60%;
}
.mobile-logo {
display: none;
}
span {
bottom: 2.95vw;
position: absolute;
}
.flex-container img {
width: 36.9vw;
}
.flex-container {
overflow: visible;
position: relative;
display: -webkit-flex;
display: flex;
-webkit-align-items: baseline;
align-items: baseline;
width: calc(100vw - 160px);
height: auto;
flex-wrap: Nowrap;
Box-sizing: border-Box;
}
.inner-wrapper {
display: inline-block;
width: 100%;
}
.flex-body {
text-align: left;
font-size: 12pt;
line-height: 14pt;
}
.flex-img {
text-align: right;
}
.bottom {
font-size: 12pt;
line-height: 14pt;
position: absolute;
left: 80px;
bottom: 27px;
}
.bottom-mobile {
font-size: 10pt;
line-height: 12pt;
position: absolute;
left: 30px;
bottom: 32px;;
display:none;
}
.container {
Box-sizing: border-Box;
width: 100%;
height: 100%;
margin: 0 auto;
padding: 36px 80px;
vertical-align: middle;
overflow:hidden;
}
.content {
max-width: 300px;
text-align: center;
}
.align {
overflow:hidden;
display: block;
position: relative;
top: 0;
@include transform(translateY(0));
&.middle {
top: 50%;
@include transform(translateY(-50%));
}
&.bottom {
top: 100%;
@include transform(translateY(-100%));
}
&.center {
margin: 0 auto;
}
}
/* Preloader
.loader {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 9999;
background: url('logo-pre.png') 50% 50% no-repeat rgb(0,0);
}
*/
/* Responsive */
@media only screen and (max-width: 680px) {
.mobile-logo {
width: 90%;
max-width: 512px;
position: fixed;
top: 40%;
right: 0;
padding: 0 5%;
display: block;
}
}
@media only screen and (max-width: 900px) {
.mobile-logo {
width: 190px;
position: absolute;
top: 30px;
transform: none;
padding: 0;
left: 30px;
display: block;
}
.container {
height: 100vh;
padding: 30px;
}
.bottom,.middle {
display:none;
}
.bottom-mobile {
display:block;
}
}
@media only screen and (max-height: 575px) and (min-height: 345px) {
.mobile-logo {
width: 190px;
position: absolute;
top: 30px;
transform: none;
padding: 0;
left: 30px;
display: block;
}
.bottom,.middle {
display:none;
}
.bottom-mobile {
display:block;
}
}
@media only screen and (max-height: 550px) {
.mobile-logo {
width: 190px;
position: absolute;
top: 30px;
transform: none;
padding: 0;
left: 30px;
display: block;
}
.bottom,.middle {
display:none;
}
.bottom-mobile {
display:block;
}
}
@media only screen and (max-height: 344px) {
.mobile-logo {
right: 30px;
left: inherit;
top: 50%;
transform: translateY(-50%);
display: block;
}
}
@media (orientation: portrait) {
body {
height: 100%;
}
}
@media (orientation: landscape) {
body {
height: 100vh;
}
}
/* Mobile Background Positioning */
@media only screen and (max-width: 900px) {
.section--1 {
background-image: url('1-1.jpg');
min-height: 100%;
}
.section--2 {
background-image: url('2-2.jpg');
min-height: 100%;
}
.section--3 {
background-image: url('3-3.jpg');
min-height: 100%;
}
}
/* User Agent # */
*[x-apple-data-detectors],a {
border-bottom: 0 !important;
cursor: pointer !important;
color: inherit !important;
text-decoration: none !important;
font-size: inherit !important;
font-family: inherit !important;
font-weight: inherit !important;
line-height: inherit !important;
}
<html>
<head>
<Meta charset="utf-8">
<Meta name="format-detection" content="telephone=no">
<title>Stackoverflow Mobile Height</title>
<Meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1.0,user-scalable=0,viewport-fit=cover">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<link href="style.css" rel="stylesheet" />
</head>
<body class="section">
<div class="container">
<img class="mobile-logo" src="logo.png" />
<div class="middle">
<div class="flex-container">
<div class="flex-item left">
<div class="inner-wrapper">
<div class="flex-body"><span class="text">text<br />
text text</span>
</div>
</div>
</div>
<div class="flex-item right">
<div class="inner-wrapper">
<div class="flex-img"><img src="logo.png" /></div>
<div class="flex-body"></div>
</div>
</div>
</div>
</div>
<div class="bottom">text text<br />
text text<br />
<br />
texttext<br />
texttexttexttexttext<br />
texttexttexttexttexttexttext<br />
<a href="tel:(03) 9000 0000">texttexttexttext</a><br />
<a href="mailto:email">texttexttexttext</a>
</div>
<div class="bottom-mobile">text<br />
text text<br />
<br />
text text text text<br />
<br />
text text<br />
texttexttexttexttexttext<br />
texttexttexttexttexttexttexttext<br />
<a href="tel:(03) 9000 0000">texttexttexttext</a><br />
<a href="mailto:email">texttexttexttext</a>
</div>
</div>
</body>
<script src="script.js"></script>
</html>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。