How to check if an user is from mobile

[Ben Goodman]

Hello everyone!

I have disabled the mobile view on my site for several personal reasons (in the experimental features), but I noticed that it also kills the $[is_mobile_browser] variable overall. I would like to display some information and add some styles for mobile users only (thinking of a sidebar for example).

I would like to know if there is any alternate way to do this.

Thanks for your response in advance!

[Retread]

Hi Ben Goodman

The $[is_mobile_browser] variable doesn't seem to be affected by the actual device but rather which version (Mobile or Desktop) the user is using.

I don't think that variable will help you and I don't think there is a way to accomplish what you want to do with any of the existing template variables.

[elli]

I would recommend using some simple JavaScript to check for the browser viewport width. If it's below a certain size, then we hide/show certain elements.

window.innerWidth is the most reliable method (that I know of) to do this. You might also want to use jQuery's resize event listener to recheck the viewport width as the window is resized, but this is optional; it's just a nice addition.

<script>
$(function() {
 (function showMobileInfo() {
   $(window).on('resize', function() {
     if (window.innerWidth < 768) { // Replace 768 with whatever size you want this to start at
       // Stuff happens in here
     }
   });
 })();
});
</script>
If you let me know what you want to do at the mobile width, I can add it to the body of the script for you.

[Ben Goodman]

Oct 25, 2020 10:49:18 GMT -8 elli said:

I would recommend using some simple JavaScript to check for the browser viewport width. If it's below a certain size, then we hide/show certain elements.

window.innerWidth is the most reliable method (that I know of) to do this. You might also want to use jQuery's resize event listener to recheck the viewport width as the window is resized, but this is optional; it's just a nice addition.

<script>
$(function() {
 (function showMobileInfo() {
   $(window).on('resize', function() {
     if (window.innerWidth < 768) { // Replace 768 with whatever size you want this to start at
       // Stuff happens in here
     }
   });
 })();
});
</script>
If you let me know what you want to do at the mobile width, I can add it to the body of the script for you.

Thank you!

My goal was to create a mobile version of my page based on the www.w3schools.com/w3css/w3css_mobile.asp template and disable the main dics of my forums and enable these. A help would be very well appreciated. Thank you!

PS: I know that the Phoenix update will allow us to customize the mobile version as well, but me and my mod have decided to avoid switching to it as soon as possible since our forum is very plugin dependant.