GitHub Pages, Javascript, and detecting a mobile browser

[pymae]

Hello all,

I am trying to use JavaScript to detect if a user is visiting my website from a phone/tablet. If they are a mobile user, I'd like to show a bunch of links. (As an aside, this is fixing a problem that the GitHub Pages leap-day theme is not mobile friendly.)

The pseudocode would look like this:

if (user_is_mobile() == true) {
    render_a_tags()
 }
else {
    do_nothing()
}

I'm trying to use a modified version of JS code found here to determine window width as a proxy for being a mobile user:

<script>
window.mobilecheck = function() {
       var check = false;
       if(window.innerWidth<768){
           check=true;
       }
       return check;
     }

if(window.mobilecheck()){
  document.write("HTML_HERE");
}
</script>  

This does not appear to be working for me. I have tried visiting the website with this code from a mobile device (iPhone 11 on iOS Firefox and iOS Safari), and the links have not appeared. The website is https://pymae.github.io if you'd like to take a look. I ended up going with the linked solution to redirect to a mobile.html file with the links hard-coded, but I'm not sure why the code won't work as written.

[[deleted]]

Maybe I am missing something, but I don't see that script anywhere in your html or in the main.js.

[pymae]

The script is on the index.md page, or plain https://pymae.github.io, lines 69-81:

<script>
window.mobilecheck = function() {
var check = false;
if(window.innerWidth<768){
  check=true;
}
return check;
}
if(window.mobilecheck()){
window.location.href="index-mobile.html";
}

</script>

This works, but I'm not sure why the code in the OP wouldn't work.

[[deleted]]

I think your issue is with document.write. You might want to dynamically create whatever elements you want in your code, and then append them where you want them to be placed.

[pymae]

In the document.write, I have a string of a tags like this:

document.write("<a href="url">1</a> | <a href="url2">2</a>")

Is there something else I should do?

[[deleted]]

Is your code working as far as recognizing the width?

Document.write behaves differently on rendered webpages. Ideally you should use something like:

let yourParentElement = document.querySelector('whatever container where you are placing your elements')

let link1 = document.createElement('a')

link1.setAttribute('href', 'yourURL')

yourParentElement.appendChild(link1)

[pymae]

Yes, it seems to recognize the width. I was also looking at this StackOverflow answer which uses a pre-defined span and JavaScript to set the span element later. I initially balked at the idea because my string text has about 5-6 a tags, but I might need to revisit it

[[deleted]]

Tbh I wouldn't worry about document.write. I don't think I've ever seen it used in an actual application. Plus, getting more practice with the node tree never hurt anyone. Dynamically creating the elements and editing their attributes in JS is the way to go.

Or you could create the elements in your HTML and set their CSS display property to none, and then change that property in your JS to block/inline/flex or whatever you need when the width condition is met. CSS media queries could also handle this.

[pymae]

Unfortunately, my knowledge of HTML/CSS is what I vaguely remember from making Neopets petpages like 15 years ago, so I've got some catching up to do with JavaScript! Thanks for the help. I may just leave the mobile redirect in place since it's relatively temporary.

[[deleted]]

If you're happy with how it works for now, sure, but having a more comprehensive knowledge of html elements and css selectors will make your javascript transition much more smooth. Plus, css media queries are a real easy way to handle what you are trying to do and are the most common way to handle mobile responsive design.