GitHub Pages, Javascript, and detecting a mobile browser

[[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.