-2

I have a web page. When I running the web page on my mobile phone, in that web page, the usage of mobile phone should be identified. If someone touch the display or use the phone in any way, the page should say that you used your phone.

I used JQuery blur focus method to check whether the browser tab is active or inactive. At anytime I use the phone, the tab will be gone to the background and detect that I used it but, Same thing happens for incoming calls. I need a way to prove that I didn't use the phone and it was an incoming call. So basically I need a way to keep someone away from the mobile phone for a certain time and notify if the person used the phone if he used it.

Anyone can help?

Dean Johns
  • 498
  • 4
  • 28
  • 1
    This is not a question. You want from stackoverflow community to write code for you. – Sudhir Ojha May 16 '18 at 11:29
  • 1
    Detecting the OS might be a good start. https://stackoverflow.com/questions/11219582/how-to-detect-my-browser-version-and-operating-system-using-javascript – Cid May 16 '18 at 11:29
  • Do you want to check if your site is opened in a browser on a phone, or do you want to check if - while opened in a browser on a phone - the *phone is being used for other things*? The first would be somewhat possible (although not reliable), the second IMO would be a silly thing to even try from a web page. – Peter B May 16 '18 at 11:33
  • Mmh just a quick thought: `window.requestAnimationFrame(callback)` calls the callback with elapsed time since the last frame was drawn. IF the tab is not active, to consume less resources frames are not drawn - so if you switch on a separate tab for 10 seconds, the next time callback is called, it's called with a delta of 10 seconds. I'd say if the delta is greater than 1 second, it's safe to say that the tab was changed, window closed, or something like that. This combined with blur could be useful. Loop frames with: `const loop = (delta) => { window.requestAnimationFrame(loop) };` – Fabio Lolli May 16 '18 at 12:58
  • Sudhir Ojha - I need only a way or some lead to do it. I'm not that silly to ask the whole code – Dean Johns May 16 '18 at 13:11

3 Answers3

1

Can't take credit for this, I've seen it somewhere before.

function mobileCheck() {
    try {
        document.createEvent("TouchEvent");
        return true;
    }
    catch(e) { return false; }
}

if (mobileCheck()) {
    alert('mobile');
} else {
    alert('not mobile');
}
Cid
  • 14,968
  • 4
  • 30
  • 45
  • 1
    I'm not that knowledgeable with mobile devices and touch screens, but... What if you have a 13" Surface Pro with touch screen, wouldn't that trigger true? – Fabio Lolli May 16 '18 at 12:51
0

So this is not JQuery but it does get the job done. Uses regexp for this. 

let mobile = navigator.appVersion;

var testForMobile = /Mobile|mini|Fennec|Android|iP(ad|od|hone)/.test(mobile);
document.write(testForMobile)
Muhammad Salman
  • 433
  • 6
  • 18
0

Mobile can be detected by this simple one liner.

var isMobile = navigator.userAgent.match(/(mobi)/i) ? true : false;

isMobile would return true for mobile devices.

Abhinav
  • 1
  • 3