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

**URL:** <https://community.thunkable.com/t/how-can-i-detect-if-a-web-app-is-opened-by-a-mobile-browser-or-an-pc/1169992>\
**Category:** Questions about Thunkable X\
**Created:** [March 16, 2021, 9:47am UTC](https://community.thunkable.com/t/how-can-i-detect-if-a-web-app-is-opened-by-a-mobile-browser-or-an-pc/1169992 "2021-03-16T09:47:42Z")\
**Posts on this page:** 14\
**Page:** 1

<div class="post-metadata">

**Author:** ![bader\_mouti](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/bader_mouti/32/98887_2.png) [@bader\_mouti](https://community.thunkable.com/u/bader_mouti)\
**Post date:** [March 16, 2021, 9:47am UTC](https://community.thunkable.com/t/how-can-i-detect-if-a-web-app-is-opened-by-a-mobile-browser-or-an-pc/1169992/1 "2021-03-16T09:47:42Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![muneer](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/muneer/32/75210_2.png) [@muneer](https://community.thunkable.com/u/muneer)\
**Post date:** [March 16, 2021, 11:06am UTC](https://community.thunkable.com/t/how-can-i-detect-if-a-web-app-is-opened-by-a-mobile-browser-or-an-pc/1169992/2 "2021-03-16T11:06:20Z")

</div>

You can do that by JavaScript easily

---

<div class="post-metadata">

**Author:** ![bader\_mouti](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/bader_mouti/32/98887_2.png) [@bader\_mouti](https://community.thunkable.com/u/bader_mouti)\
**Post date:** [March 16, 2021, 11:08am UTC](https://community.thunkable.com/t/how-can-i-detect-if-a-web-app-is-opened-by-a-mobile-browser-or-an-pc/1169992/3 "2021-03-16T11:08:55Z")

</div>

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

```auto
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");
}

```

---

<div class="post-metadata">

**Author:** ![muneer](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/muneer/32/75210_2.png) [@muneer](https://community.thunkable.com/u/muneer)\
**Post date:** [March 16, 2021, 11:10am UTC](https://community.thunkable.com/t/how-can-i-detect-if-a-web-app-is-opened-by-a-mobile-browser-or-an-pc/1169992/4 "2021-03-16T11:10:34Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![bader\_mouti](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/bader_mouti/32/98887_2.png) [@bader\_mouti](https://community.thunkable.com/u/bader_mouti)\
**Post date:** [March 16, 2021, 11:15am UTC](https://community.thunkable.com/t/how-can-i-detect-if-a-web-app-is-opened-by-a-mobile-browser-or-an-pc/1169992/5 "2021-03-16T11:15:19Z")

</div>

**like this ??**  
 ![Screen Shot 2021-03-16 at 1.15.45 PM](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/e/7/e78cdbdd6b2088bf5a5bd0a9f21342096c464d45.png)

---

<div class="post-metadata">

**Author:** ![muneer](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/muneer/32/75210_2.png) [@muneer](https://community.thunkable.com/u/muneer)\
**Post date:** [March 16, 2021, 11:43am UTC](https://community.thunkable.com/t/how-can-i-detect-if-a-web-app-is-opened-by-a-mobile-browser-or-an-pc/1169992/6 "2021-03-16T11:43:00Z")

</div>

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

> **[thunkable/webviewer-extension](https://github.com/thunkable/webviewer-extension/)**
>
> Communicate between the Thunkable Web Viewer and a website

---

<div class="post-metadata">

**Author:** ![bader\_mouti](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/bader_mouti/32/98887_2.png) [@bader\_mouti](https://community.thunkable.com/u/bader_mouti)\
**Post date:** [March 16, 2021, 12:26pm UTC](https://community.thunkable.com/t/how-can-i-detect-if-a-web-app-is-opened-by-a-mobile-browser-or-an-pc/1169992/7 "2021-03-16T12:26:56Z")

</div>

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](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/f/d/fd15d38ad0493b6fd32566a626b9b1704266c2ce.png)

---

<div class="post-metadata">

**Author:** ![muneer](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/muneer/32/75210_2.png) [@muneer](https://community.thunkable.com/u/muneer)\
**Post date:** [March 16, 2021, 12:32pm UTC](https://community.thunkable.com/t/how-can-i-detect-if-a-web-app-is-opened-by-a-mobile-browser-or-an-pc/1169992/8 "2021-03-16T12:32:24Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![bader\_mouti](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/bader_mouti/32/98887_2.png) [@bader\_mouti](https://community.thunkable.com/u/bader_mouti)\
**Post date:** [March 16, 2021, 12:36pm UTC](https://community.thunkable.com/t/how-can-i-detect-if-a-web-app-is-opened-by-a-mobile-browser-or-an-pc/1169992/9 "2021-03-16T12:36:16Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![muneer](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/muneer/32/75210_2.png) [@muneer](https://community.thunkable.com/u/muneer)\
**Post date:** [March 16, 2021, 12:52pm UTC](https://community.thunkable.com/t/how-can-i-detect-if-a-web-app-is-opened-by-a-mobile-browser-or-an-pc/1169992/10 "2021-03-16T12:52:49Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![bader\_mouti](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/bader_mouti/32/98887_2.png) [@bader\_mouti](https://community.thunkable.com/u/bader_mouti)\
**Post date:** [March 16, 2021, 1:08pm UTC](https://community.thunkable.com/t/how-can-i-detect-if-a-web-app-is-opened-by-a-mobile-browser-or-an-pc/1169992/11 "2021-03-16T13:08:03Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![muneer](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/muneer/32/75210_2.png) [@muneer](https://community.thunkable.com/u/muneer)\
**Post date:** [March 16, 2021, 1:14pm UTC](https://community.thunkable.com/t/how-can-i-detect-if-a-web-app-is-opened-by-a-mobile-browser-or-an-pc/1169992/12 "2021-03-16T13:14:46Z")

</div>

Same to you @bader_mouti

---

<div class="post-metadata">

**Author:** ![numanjohn4](https://avatars.discourse-cdn.com/v4/letter/n/eb9ed0/32.png) [@numanjohn4](https://community.thunkable.com/u/numanjohn4)\
**Post date:** [October 25, 2021, 8:51pm UTC](https://community.thunkable.com/t/how-can-i-detect-if-a-web-app-is-opened-by-a-mobile-browser-or-an-pc/1169992/13 "2021-10-25T20:51:43Z")

</div>

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.

```auto
<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.

---

<div class="post-metadata">

**Author:** ![ioannis](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/ioannis/32/146956_2.png) [@ioannis](https://community.thunkable.com/u/ioannis)\
**Post date:** [November 8, 2024, 1:26pm UTC](https://community.thunkable.com/t/how-can-i-detect-if-a-web-app-is-opened-by-a-mobile-browser-or-an-pc/1169992/14 "2024-11-08T13:26:00Z")

</div>