我的网站不会在 iPhone 上加载图像，但会在所有其他浏览器、移动设备或桌面设备上加载

Posted 2023-02-21

【中文标题】我的网站不会在 iPhone 上加载图像，但会在所有其他浏览器、移动设备或桌面设备上加载

【英文标题】：My site doesn't load images on iPhones but does on all other browsers, mobile or desktop

【发布时间】：2021-02-04 21:56:35

【问题描述】：

我一直在为我妈妈想要开始的生意设计一个网站。我终于完成了所有设置和部署。一切都按她的意愿工作，但是当我们尝试使用我妈妈或兄弟的 iPhone 访问该网站时，没有任何图像加载。 css 媒体查询格式正确，以便在 iPhone 上查看它工作正常，我在 Chrome 和 Tor 上的 OnePlus 8 Pro 上进行了尝试，它正确加载了图像。

该网站是用 React 制作的，部署在 google firebase 上（不确定这是否会以某种方式出现问题，但我查了一下并没有遇到任何问题。任何帮助将不胜感激我已经发布了屏幕截图和代码 sn -ps 下面：

这是它在桌面上的样子：

以下是 iPhone 上发生的情况：

标题部分的html和css：

    <div className="header">
  <div className="header__image">
    <div className="background__mask">
      <img className="logo_img" src=ColoredLogo  />

      <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  />
    </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;
  

【问题讨论】：

你试过什么调试？您是否能够运行 ios 设备模拟器并在您的机器上本地重现它？如果可以的话，您可以通过 Safari 将调试器连接到模拟器并查看渲染结果并检查 DOM 以了解其不同的原因。

我在 Windows 上，所以我想我必须研究一个 ios 模拟器，然后这样调试，我不确定要调试多少​​，所以我想在我潜入之前先问一下深入解决一个还没有人知道的问题，或者不知道原因，这对我来说真的很奇怪，尤其是谷歌上的大多数搜索结果，从 2011 年开始，safari 就不会加载图像，因为没有足够的内存来处理它。但无论如何，按照今天的电话标准，这似乎很荒谬

【参考方案1】：

您正在为您的图像使用webp 格式。 Safari 仅在最新更新（版本 14）后才支持此格式。 如果您的 Safari 版本早于版本 14，则您的图像将无法正常工作，除非实现回退到受支持的图像格式。

https://caniuse.com/?search=webp

【讨论】：

您好，这是问题的一部分！我上传了要托管在 imgur 上的图像，然后还删除了 background-attatchment: fixed;现在我只需要让图像正确调整大小。不过谢谢！