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
As I am sitting in a call for a native iPad application project, my Design Manager (Courtney Brillhart) and I find ourselves educating our…
uiux.blog
“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)
A protip by johnbender about mobile, web, click, oscon, and tap.
coderwall.com
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
Load external JS only on desktops and not on mobile devices: Or Use Below Code:
www.knowledgebags.com
<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 } });
www.codegrepper.com
$(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
Checkout new tutorials and guides for programming languages Javascript, Python, Java, Golang, C++, PHP
newbedev.com
$(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
Sometimes we need a little Javascript code snippet to detect if user use mobile device, the simplest...
dev.to
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");
}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
In this article, I’m going to show you how to use mobile-detect.js to detect user mobile device with just a few lines of javascript. mobile-detect.js can also detect the operating system and the current web....
redstapler.co
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
Learn how to run different scripts on desktop vs mobile
www.finsweet.com
https://responsivedesign.is/develop/javascript/conditionally-load-javascript-based-on-media-query/
Conditionally load Javascript based on media query - Responsive Web Design
Best practice for a long time has been to load your javascript at the end of the document to improve website performance, however in todays world of
responsivedesign.is
https://adactio.com/journal/5429/
Conditional CSS
The results are in. Here’s what you came up with to solve the problem of conditional loading with CSS.
adactio.com
Displaying CSS Breakpoint Information with Generated Content
A quick-and-dirty way to keep track of which breakpoint is in force as you test a design’s responsiveness.
meyerweb.com
'
https://stackoverflow.com/questions/26961140/on-click-event-for-mobile
On click event for mobile?
First of all, I know this has been answered a lot of times, but all the things I try to do, they're not working. So here's my problem: I have a non-displayed div that I want to show when the users
stackoverflow.com
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.
