How to detect all handheld devices with separation of mobile and tablet? - javascript

I can detect all handheld devices at the moment but can't separate tablet and mobile detection. I've searched lots of sources and q&a's but coudn't find a solution.
Since $.browser method removed from jQuery 1.9.1. We have to do it with native js.
Here is testing jsFiddle.
javascript:
/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ? isTabletMobile = true : isTabletMobile = false;
//this works perfect
//problem starts when i try to detect difference between mobile and tablet
/iPad/i.test(navigator.userAgent) ? isTablet = true : isTablet = false;
//can't detect other tablet devices
/Android|webOS|iPhone|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ? isMobile = true : isMobile = false;
//can't exclude tablet devices from here (like Android tablet devices)
if ( isTabletMobile ) {
alert('You are on Mobile or Tablet');
}else{
alert('You are on Destop device');
}
if ( isTablet ) {
alert('You are on Tablet');
}
if ( isMobile ) {
alert('You are on Mobile');
}
Source

you should check the screen sizes.
try some research for most minimum size of tablets.
then if the size of device you were checking is greater than or equal
to the minimum size for tablets, that means the device is a tablet.
var isDevice = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ? true : false;
var tabletMinWidth,
tabletMinHeight;
if(isDevice){
if(tabletMinWidth <= deviceWidth && tabletMinHeight <= deviceHeigth){
isTablet = true
}
}

Related

Image Popup not execute in mobile devices

I want to used on JH Image Popup. - https://joomla-handbuch.com/en/downloads/jh-image-popup
I have check on IF conditions image popup was not loading in our Mobile Devices.
if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)){
}else{
}
How to check PHP code using on Javascirpt?
$doc->addScript('colorbox-min.js');
$doc->addStyleSheet('colorbox.min.css');
And This file was not execute in mobile devices.?
Maybe you can check if a device is touchable or not:
function is_touch_enabled() {
return ( 'ontouchstart' in window ) ||
( navigator.maxTouchPoints > 0 ) ||
( navigator.msMaxTouchPoints > 0 );
}
if(is_touch_enabled()){
//Your code
}else{
//Your code
}

Detect iPod or Iphone using javascript?

I have a scenario in which I need to detect whether the device is an iPod or iPhone. navigator.userAgent/navigator.platform doesn't have device information.
Here is what I use to detect iOS devices:
function is_little_ithing() {
return (navigator.userAgent.indexOf('iPod') > -1 ||
navigator.userAgent.indexOf('iPhone') > -1);
}
function is_big_ithing() {
return (navigator.userAgent.indexOf('iPad') > -1);
}
function is_ithing() {
return (is_little_ithing() || is_big_ithing());
}

How to detect touch screen in windows 8.1 on internet explorer 11?

I have been trying to detect touch screen in windows 8.1 specially on IE 10/11 as per my project requirement...
I have tried with Modernizer.touch but its getting false on IE (touch screen).
You can use navigator ?
function is_touch_device() {
return (('ontouchstart' in window)
|| (navigator.MaxTouchPoints > 0)
|| (navigator.msMaxTouchPoints > 0));
}
if (is_touch_device()) {
alert("Yay! Its touch");
}else{
alert("Not touch!")
}
Full source:http://ctrlq.org/code/19616-detect-touch-screen-javascript

Check for Touch device with Javascript

I have 3 buttons with hover states which makes a little tooltip appear to describe the button. They work fine but on touchs screen they do not disappear after the user clicks on the button.
So I've tried a few js scripts for checking if a device is a touch device or not. They almost work but they also when I test on IE11 it also gets detected as a touch device. Chrome & Firefox do not get mistaken as a touch device.
Any sugestions?
Her is what I've tried
/*****************************
TOUCH DEVICES HOVER FIX START
****************************/
// http://stackoverflow.com/a/4819886/1814446
function isTouchDevice() {
return 'ontouchstart' in window // works on most browsers
|| 'onmsgesturechange' in window; // works on ie10
};
// http://www.stucox.com/blog/you-cant-detect-a-touchscreen/#poke-it
var hasTouch;
window.addEventListener('touchstart', function setHasTouch () {
hasTouch = true;
// Remove event listener once fired, otherwise it'll kill scrolling
// performance
window.removeEventListener('touchstart', setHasTouch);
}, false);
// https://github.com/Modernizr/Modernizr/blob/master/feature-detects/touchevents.js
define(['Modernizr', 'prefixes', 'testStyles'], function( Modernizr, prefixes, testStyles ) {
// Chrome (desktop) used to lie about its support on this, but that has since been rectified: http://crbug.com/36415
Modernizr.addTest('touchevents', function() {
var bool;
if(('ontouchstart' in window) || window.DocumentTouch && document instanceof DocumentTouch) {
bool = true;
} else {
var query = ['#media (',prefixes.join('touch-enabled),('),'heartz',')','{#modernizr{top:9px;position:absolute}}'].join('');
testStyles(query, function( node ) {
bool = node.offsetTop === 9;
});
}
return bool;
});
});
if(bool===true) {
console.log('Touch Device'); //your logic for touch device
jQ( "#btn-1, #btn-2, #btn-3" ).click(function() {
jQ("#btn-1 .tooltip").css('opacity', '0');
jQ("#btn-2 .tooltip").css('opacity', '0');
jQ("#btn-3 .tooltip").css('opacity', '0');
});
}
else {
//your logic for non touch device
}
For IE10+ you can utilize "window.navigator.msMaxTouchPoints"
example code
function isIETouch ()
{
return window.navigator.msMaxTouchPoints == undefined ? false : window.navigator.msMaxTouchPoints;
}

How do I redirect to mobile, but let the user switch from then on?

I am running into a problem with re-directing to my mobile version. I do not have the programming skills to accomplish this. I am stuck.
Here is the code I have below, but first here is the logic I WANT to accomplish:
When a mobile user visits a mobile version is served by default.
If they click the 'View Full Site' then it switches and stays on the full site UNTIL and only IF they click the View Mobile Version (footer) and then it stays on the MOBILE version, unless they click on 'View Full Site' again.
That is it but I cannot get it to work.
Here is the code that I placed in the header:
<script type="text/javascript">
<!--
var fullSiteCookie = readCookie('fullsite');
if ( fullSiteCookie !='t' ) {
if (screen.width <= 600) {
window.location = "/m/mobile.html";
}
if ( (navigator.userAgent.indexOf('Android') != -1) ) {
document.location = "/m/mobile.html";
}
if ( (navigator.userAgent.indexOf('iphone') != -1) ) {
document.location = "/m/mobile.html";
}
else
document.location="/";
}
//-->
</script>
Then the hyperlink on the full site is:
View Mobile Site</span>
Likewise the mobile site has it's own link:
FULL SITE VERSION
PROBLEM: I can never get the site to go (the first time) over to the mobile version. It only goes to the full desktop version. That is a show-stopper. It MUST be able to automatically send visitors to the mobile site if they are visiting the site on a mobile device. The should not have to click anything.
Any ideas? I am just not going to be able to figure this out, without help. Of course this is something I need yesterday.
Your elseis placed IN the if so it triggers only on the NOT iPhone condition.
Try this:
if ( fullSiteCookie !='t' ) {
if (fullSiteCookie =='m' || screen.width <= 600 || navigator.userAgent.indexOf('Android') != -1 || navigator.userAgent.indexOf('iphone') != -1) {
window.location = "/m/mobile.html";
} else {
// not mobile or forced mobile
document.location = "/";
}
} else {
// forced Normal
document.location = "/";
}
Similar to #Loyalty Tech's suggestion, but I have some to add.
var fullSiteCookie = readCookie('fullsite');
/* Verify that "fullSiteCookie" is a valid value.
Are you sure the cookie is set the first time?
*/
if ( fullSiteCookie !='t' &&
(screen.width <= 600 ||
navigator.userAgent.indexOf('Android') != -1 ||
/* Fix case of "iphone" to "iPhone" */
navigator.userAgent.indexOf('iPhone') != -1)){
window.location = "/m/mobile.html";
} else {
window.location = "/";
}

Categories

Resources