我的网站在显示正确内容之前会在桌面上显示移动视图一秒钟。 如何防止这样做？

Question

My website - https://wilfredopersonal.herokuapp.com/# - shows some specific content for mobile view. The problem is that this content is also shown in Desktop while the Desktop content is loading. How can I prevent it from doing so?

<script>
  function isMobile() {
    if (navigator.userAgent.match(/Mobi/)) {
      return true;
    }

    if ("screen" in window && window.screen.width < 1366) {
      return true;
    }

    var connection =
      navigator.connection ||
      navigator.mozConnection ||
      navigator.webkitConnection;
    if (connection && connection.type === "cellular") {
      return true;
    }

    return false;
  }
</script>


<script>
  if (!isMobile()) {
    document.getElementById("not-desktop").style.display = "none";
    document.getElementById("container").style.display = "unset";
  } else {
    document.getElementById("not-desktop").style.display = "unset";
    document.getElementById("container").style.display = "none";
  }
</script>

Answer 1

Because your script is executed after HTML loaded. So before the browser read to your script, the mobile keep visible.

I recommend you to use CSS media query to solve this rather then using script. Here is a good answer demonstrate how to use media query to target desktop and mobile . This answer could solve your problem.

Another way is set #not-desktop 's display to none in your CSS. Then when the script executed, if it is shows on mobile, your code will show it. But this method is not flexible.

Answer 2

This is an issue where you are displaying both your mobile view and your desktop view at the same time, then disabling which ever "view" is incorrect. Since your javascript is loaded after the page is created, it will display both views until the javascript loads and disables one.

You can fix this by making both of them "disabled" from the start - add the style attribute like this: style="display:none" to "not-desktop" and "container". That way both of them will be disabled until the javascript can enable one.

EDIT: after looking at Li Jinyao's answer, I see that there is a much faster way to do this - use a CSS media tag to check the width of the element, and only display it if it matches the requirements. Afterwards, use java script to check the userAgent and anything else, and change the displayed element accordingly. To see information about CSS media tags, look at Li Jinyao's answer.