[英]My site doesn't load images on iPhones but does on all other browsers, mobile or desktop
我一直在为我妈妈想要创办的企业设计一个网站。 我终于完成了所有设置和部署。 一切都按她的意愿工作,但是当我们尝试在我妈妈或兄弟的 iPhone 上访问该网站时,没有任何图像加载。 css 媒体查询将其正确格式化以便在 iPhone 上查看它工作正常,我在我的 OnePlus 8 Pro 上尝试使用 chrome 和 Tor 并正确加载了图像。
该网站是在 React 中制作的,部署在 google firebase 上(不确定这是否会以某种方式出现问题,但我查了一下,并没有遇到任何问题。任何帮助将不胜感激我在下面发布了屏幕截图和代码片段:
标题部分的 html 和 css:
<div className="header">
<div className="header__image">
<div className="background__mask">
<img className="logo_img" src={ColoredLogo} alt="logo" />
<h1 className="header__text lineTwo">
Focus on what you do best!
<br /> Leave the books to us!
</h1>
</div>{" "}
</div>
</div>
.header__image {
width: 100%;
height: 775px;
background-image: url("./bkg_img.webp");
background-size: cover;
background-attachment: fixed;
}
.header__text {
font-size: 60px;
color: rgb(224, 149, 8);
text-align: center;
text-shadow: 0.25px 0.25px #000000;
}
.myh1 {
color: rgb(1, 51, 38);
margin-top: 30rem;
}
.lineTwo {
margin-top: 37rem;
}
.logo_img {
position: absolute;
width: 100vw;
height: 50vh;
}
.background__mask {
display: flex;
flex-direction: column;
z-index: 10;
background-color: rgba(0, 0, 0, 0.5);
width: 100%;
height: 100%;
overflow: hidden;
align-items: center;
}
@media (max-width: 764px) {
.lineTwo {
margin-top: 25rem;
}
.logo_img {
margin-top: -7rem;
}
}
用于虚拟簿记部分的 html 和 css:
<div className="entrepreneurs">
<h1 className="entrepreneurs__heading">
Virtual Bookkeeping for Entrepreneurs
</h1>
<div className="body__container">
<div className="entrepreneurs__left">
{/* <h1>Bookkeeping for small to medium sized businesses:</h1>
<h2>Did you know outsourcing your bookkeeping can: </h2> */}
<img src={logo} alt="" />
</div>
<div className="entrepreneurs__right">
<ul>
<li>✓ Save Your Business Money</li>
<li>✓ Increase Your Cash Flow</li>
<li>✓ Reduce Overhead Costs</li>
<li>✓ Save Money on Your Taxes</li>
<li>✓ Better Analysis of Your Business</li>
<li>✓ Help You Get Investors</li>
</ul>
</div>
</div>
</div>
.entrepreneurs__right > ul {
list-style-type: none;
font-size: 24px;
}
.entrepreneurs__left > img {
width: 80%;
height: auto;
border-radius: 2.5%;
}
.entrepreneurs {
text-align: center;
}
.entrepreneurs > h1 {
font-size: 55px;
}
.body__container {
color: teal;
padding: 20px;
background-color: white;
display: flex;
background-size: cover;
background-attachment: fixed;
}
.entrepreneurs__right {
color: rgb(70, 70, 70);
}
.entrepreneurs__right > ul > li {
margin-top: 25px;
}
.entrepreneurs__right > ul > li {
line-height: 4rem;
}
.entrepreneurs__heading {
font-size: 60px;
color: rgb(1, 51, 38);
text-align: center;
text-shadow: 0.25px 0.25px #000000;
}
@media (max-width: 1156px) {
.body__container {
flex-direction: column;
}
.entrepreneurs__right {
margin-left: auto;
margin-right: auto;
}
}
您正在为图像使用webp
格式。 Safari 仅在最新更新(版本 14)后才支持此格式。 如果您的 Safari 版本早于版本 14,您的图像将无法使用,除非实现回退到支持的图像格式。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.