在显示正确的内容之前，我的网站在桌面上显示移动视图几分之一秒。我怎么能阻止它这样做呢？

Question

我的网站 - https://wilfredopersonal.herokuapp.com/# - 显示了移动视图的一些特定内容。问题是，在加载桌面内容时，此内容也会显示在桌面中。我怎么能阻止它这样做？<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

这是一个同时显示移动视图和桌面视图的问题，然后禁用哪个“视图”不正确。由于您的javascript在页面创建后加载，它将显示两个视图，直到javascript加载并禁用一个。

您可以通过从开始“禁用”它们来解决这个问题 - 将样式属性添加style="display:none"到“not-desktop”和“container”。这样他们两个都将被禁用，直到javascript可以启用一个。

编辑：在看了李金尧的回答后，我发现有一种更快的方法可以做到这一点 - 使用CSS媒体标签来检查元素的宽度，只有符合要求时才显示它。然后，使用java脚本检查userAgent和其他任何内容，并相应地更改显示的元素。 

Answer 2

因为您的脚本是在加载HTML后执行的。因此，在浏览器读取您的脚本之前，移动设备会保持可见状态。

我建议你使用CSS媒体查询来解决这个问题而不是使用脚本。

另一种方式是设定#not-desktop的display，以none你的CSS。然后当脚本执行时，如果它在移动设备上显示，您的代码将显示它。但这种方法并不灵活。