I'm completely lost when it comes to jQuery/Javascript so apologies in advance. I'm using the MixItUp jQuery filter on a Wordpress site which has the option to show either grid or list view (default), what I'd like to do is set grid as default when visiting the site using a mobile device.
This is what I have at the moment (I've been copying and pasting from around the web so probably not even close):
if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
$(document).ready(function(){
$('#Grid').mixitup('toGrid');
});
Any help on this issue would be highly appreciated!
I have messed with detecting if a device is mobile or not a lot in the past and I have found it to be much easier to detect if it is not a mobile device versus detecting if it is a mobile device.
I like the searches you are doing, but you are missing a few like the Nook and Kindle a lot of mobile devices also use the word "mobile" in their user agent. With that said even if you include these in your search you will surely have more that pop up over the next few years. I have found it to be better to detect if it is a desktop or not because there are not new desktop operating systems being added on almost a yearly basis like we are seeing with mobile devices these days. Not only that but I have also found that older Android devices can return mixed results in their user agents.
Here is the bit of code we use to figure out if the device is Windows, Linux, Mac, Facebook, a bot, or a mobile device. We have used and tested this code a lot with all the different devices we have vising our site and it appears to be working correctly for all devices. I hope this helps!
$(document).ready(function(){
if (deviceType() == "Mobile")
$('#Grid').mixitup('toGrid');
});
function deviceType ()
{
var OSName="Mobile";
if (navigator.appVersion.indexOf("Win")!=-1 && navigator.appVersion.indexOf("Phone")===-1) OSName="Windows";
if (navigator.appVersion.indexOf("Macintosh")!=-1) OSName="MacOS";
if (navigator.appVersion.indexOf("X11")!=-1) OSName="UNIX";
if (navigator.appVersion.indexOf("Linux")!=-1 && navigator.appVersion.indexOf("Android")===-1) OSName="Linux";
if (navigator.appVersion.indexOf("facebook.com")!=-1) OSName="facebook";
if (navigator.appVersion.indexOf("bot")!=-1) OSName="bot";
if (navigator.appVersion.indexOf("Slerp")!=-1) OSName="bot";
return OSName;
}
You want to wrap the "if" statement and function call inside the document ready call. Not the other way around:
$(document).ready(function () {
if(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|OperaMini/i.test(navigator.userAgent)) {
$('#Grid').mixitup({layoutMode : 'grid'});
}
});
Related
What I want to know: is there a way to detect a particular device (iPad) using either HTML, CSS or JS? I want to be able to disable some code if the site is bought up on an iPad. As of yet I don't know what code I want to disable because I don't yet know what is causing the problem but I am researching through trial and error to see if I can get the site to work on the iPad with certain changes.
The Issue:
I designed a website that has an overlay that has polygons moving across it using CSS. The site uses HTML5, Bootstrap 4, Parallax (I know it does not work on iPad without work arounds and it is not the problem) and JS. The problem is that when the site loads on an iPad it flickers, I thought it was the CSS that makes up the animations on the index page, but no matter which page I bring up it still flickers. I am at a lost as to what the cause is. The web address is www.ace-of-he-arts.com. If you have seen this before any help would be appreciated.
You can check for IOS or any other device like android by navigator.platform . You can read more here -
https://www.w3schools.com/jsref/prop_nav_platform.asp
Currently (2019) difference between iPadPro and the other platforms is that iPadPro is touch enabled.So you can use it for clarification.
Here are a couple of helpful methods you can use.
function isIOS() {
var pl=navigator.platform.toString().toLowerCase();
if (pl.includes("IPad") || pl.includes("IPhone") || pl.includes("IPod")){
return true;
} else {
return navigator.maxTouchPoints &&
navigator.maxTouchPoints > 2 &&
/MacIntel/.test(navigator.platform);
}
}
function isIpadOS() {
return navigator.maxTouchPoints &&
navigator.maxTouchPoints > 2 &&
/MacIntel/.test(navigator.platform);
I have seen very many questions asking how to detect if a device is mobile or not. Generally, they fall into 3 categories:
Check the screen size/viewport
Check the User Agent
Use a library, such as Modernizr to work around browser capabilities.
After implementing what I could, I still run across a situation which I have never seen asked or addressed; On many mobile browsers, there is a "Request desktop site" (Chrome) "Desktop Mode" (Dolphin) or "Desktop View" (HTC Sense).
I have chosen strategy #1 above, which works unless the page is viewed in desktop mode. Implementing #2 has drawbacks (spoofing, uncatalogued agents, etc.).
Is there a reliable (cross browser) way to detect Desktop Mode on a mobile browser with Javascript? jQuery or other libraries would be okay, but it should be based upon feature detection, rather than an array of User Agents.
So, Finally I have proven method to detect this. There's little tricky but got Exact Solution.
STEP 1
Install device-uuid Library , ( Here already mentioned. How to install )
<script src="https://raw.githubusercontent.com/biggora/device-uuid/master/lib/device-uuid.min.js"></script>
<script>
var user_configuration = new DeviceUUID().get();
console.log(user_configuration);
</script>
// output
// {"isAuthoritative":true,"isMobile":true,......"resolution":[980,1104],"browser":"Chrome"}
STEP 2
Detect device width
var curr_width = parseInt((window.innerWidth).toFixed());
STEP 3
Now need to compare curr_width with user_configuration.resolution[0] (width)
If both are same then this is normal view and if not then it's "DESKTOP VIEW" . attaching screenshot.
if(curr_width == user_configuration.resolution[0]){
alert("normal_view");
}else{
alert("desktop_view");
}
Screenshot of Desktop Mode ON in mobile browser
Screenshot of Normal mobile view
There is no way for a webpage to detect whether the device is actually a desktop computer or not. When "Request desktop site" is enabled, the phone acts just like a desktop does. One way to check this is to check the OS of the device. However, some phones use windows as their OS, so this won't work on windows phones.
I understand the concept of using #media-queries in building responsive websites, and how as a single website, it works across the different platforms...but what is the best way to create a separate or secondary website, dedicated for just mobile and tablet devices?
If I have the following website - mywebsite.com and create a folder on my directory, called m for example, so that I have a sub-domain name along the lines of m.mywebsite.com, how do I tell the device to display the secondary website m.mywebsite.com on certain devices, instead of mywebsite.com?
This will help you: http://detectmobilebrowsers.com/ it contains every Language.
As in the previous answer, I use detectmobilebrowsers, in fact the jQuery plugin. Then all you need to do is:
$(document).ready(function(){
if($.browser.mobile && $.cookie("mobile")!="false") { //the cookie is set only if a user on the mobile website prefers to use the desktop website
window.location.href = "http://m.mywebsite.com/";
}
}
I have a website with a simple Flash animation behind some text and semi-transparent images as a background. I have used swfobject to embed it and set wmode opaque to make it display correctly in most browsers.
For browsers without Flash, the user gets a static background image instead and would not know they were missing anything. However, Android users get the flash background on top of everything as per the known issue with how Flash content is rendered in the Android browser making the site unusable.
I have added a crude browser sniff javascript function to the swfobject code to prevent it from loading for any user agent whith 'Mobile' in it:
<script type="text/javascript">
if (navigator.userAgent.indexOf('Mobile') == -1)
{
var flashvars = {};
var params = { wmode: "opaque" };
var attributes = {};
swfobject.embedSWF("Images/Layout/center_flash.swf", "flashBg",
"1004", "502", "9", "false", flashvars, params, attributes);
}
</script>
The only problem I have left is for Android users browsing with 'Mobile View' turned off as the user agent pretends to be a desktop version of Safari (I think). I do not wish to disable the Flash animation for all Safari users. Is there a way of blocking it for just Andriod users - even if they have 'Mobile View' disabled?
Possible ideas include:
detecting the Flash version with JavaScript or Flash. Does Android use specific versions (version numbers) of Flash which are different from the desktop equivalent?
blocking the specific user agents used by Android devices with 'Mobile View' disabled.
Has anyone come up with an effective workaround for this issue?
Your help/input is appreciated!
You can detect android only by checking the userAgent of the browser in your JavaScript
Something like this:
if (navigator.userAgent.toLowerCase().indexOf("android") != -1)
{
// It's android
}
As far as the flash issue itself, I don't know as I never use flash :P
edit
You can also use that technique for other useragents (I.E. iPhone, iPad, safari)
edit2
Sorry, I just went on my android phone and realized the actual setting changes the userAgent to whatever the user picks (desktop/ipad/iphone/safari). That's no good then, I apologize.
Unfortunately, what you are asking is very difficult then. There are no unique identifiers in the android flash version to give you any help. And the fact that android spoofs the userAgent makes it impossibly to detect if they are on mobile or not.
There exist services that can tell you whether a user is on mobile based on their IP.
I'm sorry to say I don't know how fast, reliable, or expensive they are, but if you must determine whether a user is on Android, that's an avenue to consider
I'm looking to create a simple redirect on my homepage for users of major mobile OS (at least Android, Nokia/Symbian, Windows, iOS and Blackberry OS).
At present I have it working for iPhone / iPod (see below), but I'm wondering whether there's a simple way in javascript to check for all. (As opposed to just writing out a big ol list of mobile userAgents).
Perhaps something that detects screensize?
// Current Code
<script type="text/javascript">
if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i))) {
if (document.cookie.indexOf("iphone_redirect=false") == -1) {
window.location = "http://m.domain.co.nz";
}
}
</script>
This properly done on the server, not on the client.