How can I detect if a web app is opened by a mobile browser or an PC?

Questions about Thunkable
1

Hi all
is that posable to know if a web app is opened by a mobile browser or an PC ?

i just want to post a message on the label if a web app is opened by a mobile browser

i tried to get the Column Width and if the ( Width < 412 ) but its post the message on PC also

THANK YOU

1 Like
2

You can do that by JavaScript easily

1 Like
3

thank you muneer

i have search on google and i found this JavaScript code but i dont know how to put it on thunkable

can you tell me how please

if(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)){
  // true for mobile device
  document.write("mobile device");
}else{
  // false for not mobile device
  document.write("not mobile device");
}
1 Like
4

Put it in an html file and add this file to project assets you can call it from web viewer component.

2 Likes
5

like this ??
Screen Shot 2021-03-16 at 1.15.45 PM

1 Like
6

Yes but if you want to pass the information to your app then you need to integrate the web-viewer extension with the code

1 Like
7

thank you muneer its working good

i create the html file and test it on my app and its working good
and its test if it the phone or pc and then its post a message to my app

but the last question please how i can get the respond from the test

Screen Shot 2021-03-16 at 2.21.12 PM
Screen Shot 2021-03-16 at 2.21.12 PM1461Ɨ986 153 KB

1 Like
8

You need to change the code. Iā€™m not in front of my computer now, I can do it for you later if you are confused how to do it.

1 Like
9

that will be amazing thank you so much
i will wait your replay
thank u

1 Like
10

The required change is:
Replace
document.write(ā€œmobile deviceā€);
With
ThunkableWebviewerExtension.postMessage(ā€˜mobile deviceā€™);

Do the same for the other statement.

Also move the <script scr="httpsā€¦

Above your code.

1 Like
11

thank you so so much its working good
have a nice day

1 Like
12

Same to you @bader_mouti

1 Like
13

There is a JavaScript API built-in for detecting media. The JavaScript window.matchMedia() method returns a MediaQueryList object representing the results of the specified CSS media query string. You can use this method to detect mobile device based on the CSS media query.

<script>
$(document).ready(function(){
  let isMobileDevice = window.matchMedia("only screen and (max-width: 760px)").matches;
  if(isMobileDevice){
    // The viewport is less than 768 pixels wide
    //Conditional script here
  } else{
    //The viewport is greater than 700 pixels wide
    alert("This is not a mobile device.");
  }
});
</script>

You can use above script to do show/hide elements depending on the screen size.

1 Like