2

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>
rrk
  • 15,677
  • 4
  • 29
  • 45
Wilfredo Casas Farach
  • 21
  • 4
  • 6
    You can do this in pure CSS with [media queries](https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries). This would be the simplest and cleanest approach. – Alicia Sykes May 16 '19 at 12:05
  • @Alicia not all of it though, they are doing more than just checking the viewport width here … And checking whether the User Agent contains `Mobi` or the connection type is reported as cellular, is not possible using media queries alone. – 04FS May 16 '19 at 12:07
  • Even if it works, that's why media queries exist. It's called **Responsive Web Design** https://www.w3schools.com/css/css_rwd_mediaqueries.asp – josemartindev May 16 '19 at 12:08
  • 1
    Make both `display:none` as a default. Only show the one you want to when the page is fully loaded. – Wiktor Zychla May 16 '19 at 12:10
  • Since you refuse to use `media queries` as suggested (and the suggestion is right), you can try and put the script in the `head` tag. even though its not recommended to embed JS in the head of a document (it should be as close to the closing `

    ` tag, it will apply the class immediatly.

     – Rafael Herscovici May 16 '19 at 12:10

2 Answers2

2

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.

Li Jinyao
  • 898
  • 2
  • 12
  • 30
1

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.

kcode
  • 352
  • 1
  • 2
  • 14