Mobile : Implement Javascript conditionally

Term : TAB vs. CLICK

https://uiux.blog/stop-using-the-term-click-in-a-mobile-experience-479b8ed4f567

Stop using the term “Click” in a Mobile Experience

“Taps” are used for applications/websites on a mobile device. Having a mobile device in your hand is a completely different experience than using a mouse to interact with a screen. Tapping on a mobile device is a gesture that demands smart use of space, text that is easily legible, logical interaction clues and, perhaps the most important when designing a touch interface, large touch targets. Using a mouse allows a user to click on text links that can be as small as 6pt, whereas trying to tap on a 6pt text link with fingers on a mobile device can lead to a less than great experience.

 

https://coderwall.com/p/bdxjzg/tap-vs-click-death-by-ignorance

Tap vs. Click: Death by Ignorance (Example)

 

 

 

---

How to detect the devices : 

1.

Detect the screen size : 

  http://www.knowledgebags.com/load-external-js-desktops-not-mobile-devices/

Load external JS only on desktops and not on mobile devices - Knowledge Bags

<script>
(function() {
if( window.innerWidth > 600 ) {
    var theScript = document.createElement('script');
    theScript.type = 'text/javascript';
    theScript.src = '<?php bloginfo('template_url'); ?>/js/process-home.js';
 
    var head = document.getElementsByTagName('head')[0];
    head.appendChild(theScript);
}
})();
</script>

<script>
(function() {
if( window.innerWidth > 600 ) {
    document.write('<scr'+'ipt type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/four.js" ></scr'+'ipt>');
}
})();
</script>

 

  https://www.codegrepper.com/code-examples/javascript/best+way+to+detect+mobile+device+jquery 

best way to detect mobile device jquery Code Example

$(function() {      
    let isMobile = window.matchMedia("only screen and (max-width: 760px)").matches;

    if (isMobile) {
        //Conditional script here
    }
 });

 

if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
 // some code..
}

 

https://newbedev.com/javascript-run-jquery-only-on-mobile-code-example

Programming tutorials | Newbedev

$(document).ready(function () {
    $(window).on("resize", function (e) {
        checkScreenSize();
    });

    checkScreenSize();

    function checkScreenSize(){
        var newWindowWidth = $(window).width();
        if (newWindowWidth < 481) {
            $('.right').insertBefore('.left');
        }
        else
        {
            $('.left').insertBefore('.right');
        }
    }
});

 

2.

Detect the browser user agent :

https://dev.to/timhuang/a-simple-way-to-detect-if-browser-is-on-a-mobile-device-with-javascript-44j3

A simple way to detect if browser is on a mobile device with Javascript

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

 

Oskar Bechtold :

this is very very unreliable. UserAgent can be changed and as far as I know, iPads want to be treated as desktops now and thus send the same UA in Safari as the Desktop Safari.
Mozilla is of a similar opinion:
developer.mozilla.org/en-US/docs/W...

 

 

  https://redstapler.co/detect-mobile-device-with-javascript/

Detect Mobile Device with Javascript - Red Stapler

if( navigator.userAgent.match(/Android/i)
 || navigator.userAgent.match(/webOS/i)
 || navigator.userAgent.match(/iPhone/i)
 || navigator.userAgent.match(/iPad/i)
 || navigator.userAgent.match(/iPod/i)
 || navigator.userAgent.match(/BlackBerry/i)
 || navigator.userAgent.match(/Windows Phone/i)
alert("You're using Mobile Device!!")

---

Conditional implement of Javascript : 

 

https://www.finsweet.com/hacks/27

Run different scripts on desktop vs mobile

 

  https://responsivedesign.is/develop/javascript/conditionally-load-javascript-based-on-media-query/

Conditionally load Javascript based on media query - Responsive Web Design

 

https://adactio.com/journal/5429/

Conditional CSS

 

https://meyerweb.com/eric/thoughts/2018/02/21/displaying-css-breakpoint-information-with-generated-content/

Displaying CSS Breakpoint Information with Generated Content

'

 

 

 

 

https://stackoverflow.com/questions/26961140/on-click-event-for-mobile

On click event for mobile?

 there are some issues with jquery and detecting touches. i find it best to set event listeners with javascript for this sort of thing. I've had luck with something like this:

this.addEventListener('touchend', function(e){happens(e)}, false);

touchend is a good mouseup equivalent for mobile. touchstart should work for mousedown like you were trying.