首先：我是个新手，3个月前才开始用generel编程。
我正在为一个朋友建立一个网站。它的导航栏应该响应地改变它的HTML内容，这在我测试的每一个设备上都很好。但是当我试图用DOMContentLoaded设置我的nav-ul的innerHtml时，出了问题，但只在IOS Safari上。不幸的是，我不能在我的iOS Safari上使用任何浏览器开发工具。
这是我的app.js

document.addEventListener("DOMContentLoaded", function() {
  const rect = document.querySelector(".main-container");
  const screenWidth = rect.getBoundingClientRect().width;

  if (screenWidth <= 800) {
    document.getElementById("navbar-list").innerHTML = 
     `<li>
        <a href="tel:xxxxx">
          <img src="./vector/phone1.png" alt="" class="icon">
          <p id="number">
            Anrufen
          </p>
        </a>
      </li>
      <li>
        <a href="whatsapp://send?text=Hallo! ich bin ein text der in einem whatsapp button programmiert ist auf peters website!&phone=xxxxx">
          <img src="./vector/icons8-whatsapp.svg" alt="" class="icon">
          <p>
            WhatsApp
          </p>
        </a>
      </li>`
  } else {
    document.getElementById("navbar-list").innerHTML = 
     `<li>
        <a href="#home">
          Home
        </a>
      </li>
      <li>
        <a href="#faecher">
          Fächer
        </a>
      </li>
      <li>
        <a href="#konzept">
          Konzept
        </a>
      </li>
      <li>
        <a href="#reviews">
          Ergebnisse
        </a>
      </li>
      <li>
        <a href="#contact">
          Kontakt
        </a>
      </li>`
   }
});

我是不是因为提到了一些异步的东西而错过了一些等待的东西？
谢谢你的帮助！