Changing links based on mobile device - javascript

I have an HTML img tag with a static HTML link.
My idea is to dynamically change that link (but not the image) based on what type of device my user is connecting from. The major types of devices I am concerned with are PC, Google/Andriod, Ios, Amazon/Andriod.
Is there an HTML/CSS/Javascript solution to this, or is php/dom/server side the only options?

Javascript/JQuery will work for you. Let's say you used the code from here to detect different mobile browsers: http://www.abeautifulsite.net/blog/2011/11/detecting-mobile-devices-with-javascript/
Then you could write something like this:
if( isMobile.iOS() || isMobile.Android() ){
$('a#mylink').attr('href', 'http://newlink.com');
}

You might consider using CSS media queries for device sizes: http://css-tricks.com/snippets/css/media-queries-for-standard-devices/
OR you could use some sort of server-side detection library such as: https://code.google.com/p/php-mobile-detect/
OR you could use javascript: What is the best way to detect a mobile device in jQuery?

Related

Detect browsers that AREN'T mobile?

I'm using the javascript from http://detectmobilebrowsers.com/ to see check if a browser is mobile and then use a different version of my website.
However I'd also ideally like the site to revert to desktop if a browser isn't one of the mobile ones.
I don't wanna post the whole thing because it's quite long but the function goes like this:
(function(a,b){if(/...'http://detectmobilebrowser.com/mobile');
So basically, I want 'if' to instead have a role of 'if not'. How can I accomplish this?
Shouts out to #JennaSloan in the javascript chat - the answer is to use the following:
if(!( or if(false==(

Mobile and tablet specific websites

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

How to detect if mobile browser will show a "native" dropdown control?

I would like to check whether a browser is going to show a special "native" style dropdown (such as the iPhone and iPod) without checking specifically by browser name. Is it possible to check for that capability in a more generic way without looking at the user agent by name?
I'd like to do this to determine whether to render a standard or more enhanced dropdown control.
I don't believe this is actually possible without a really poor solution. I bet the best way to go is to just detect the device because pretty much all mobile browsers use a native ddl for displaying options.
This can be achieved by using Modernizr's media queries and touch detection:
if (Modernizr.touch && Modernizr.mq('only screen and (max-width: 768px)') {
//it is a mobile / tablet device
}
Or use regular CSS media queries.
I'm an 90% sure of this answer: No.
You are looking to detect if you are on a browser that looks weird but you are defining weird subjectively. User Reda's answer is correct, but it violates part of your question (not to identify browsers by name). My point is that you need to identify the browsers by name because you're qualifier is subjective, so you won't find a JS/CSS test for it.
Browsers have complete control over what dropdown they show. Most are inconsistent with their implementation of CSS on these dropdown components. There are no standards saying a browser needs to expose any information about the dropdown at the application level.
To affect what you want, you need to find the browsers whose dropdown controls you don't like and list them out, and target them via Modernizr or other such trickery. Unfortunately that violates your question's intent, so I think the answer to your actual question is... no, sorry.
I'm currently checking for the existence of window.orientation and it seems to do the job for android and ios.
You can check the appearance css property
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
and if it is not 'none' then your input has native styling.
You can find the possible values of appearance here:
https://developer.mozilla.org/en-US/docs/Web/CSS/-moz-appearance and here http://trentwalton.com/2010/07/14/css-webkit-appearance/
As i read this question i got an idea for a dirty solution. Just a guess but maybe it helps:
Place your native element into the HTML and try get it in JavaScript with the elementFromPoint function. (MDN link)
If you get no element or the returned element is not your native one you know it is not displayed.
try something like this
if (/Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent)) {
$('#SOMEselectpicker').selectpicker('mobile');
}

Switch web site to mobile css client side with JQuery

I am trying to change the display of my web pages depending on the version of the browser and space on screen. I need to completely change the look of the pages as follow:
If the site is displayed on a mobile phone I want the mini version.
If the site is displayed on a desktop browser but the size of the window is too small I want the mini version.
If the site is displayed on a desktop browser and the window can accommodate the full version I want the full version displayed.
If no javascript is available the full version should display.
I just started with some pretty basic code which relies on userAgent:
if( /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent) )
Is there a clean way to achieve what I'm trying to do with JQuery for example?
Use CSS media queries. Sniffing the user agent is not reliable, and will lead to maintenance headaches in the future. Also, using media queries means no javascript is required which is good from a separation of concerns point of view.

Loading JS script for only iOS devices?

I have a jQuery script I'm using on a site to allow fixed position background images on iPhone/iPad/iPod. However it seems to be clashing with another script I am using on the site that enlarges background images full screen. Luckily they're independent of each other, I don't need the clashing background image script to work on iOS devices and vice versa.
Is there a way I can specifically target IOS devices to serve a JS file? I initially thought about using some kind of IF statement and doing it on window size but that started to get a bit complicated and affects other non-IOS devices. It just needs to run something like this...
..."if IOS device then load scroll.js"
I know device/browser sniffing is frowned upon but I can't think of another way around this problem.
You can use the Mobile Safari user agent string to detect mobile safari server-side, see: How do I detect Mobile Safari server side using PHP?
You can also do this in JavaScript:
if(navigator.userAgent.match(/(iPhone|iPod|iPad)/i))
See iPhone & iPod Detection Using JavaScript for more information.
You can use Detect Mobile Browser (it has a library for javascript).
you can also try this
if (navigator.userAgent.match(/like Mac OS X/i)) {
alert('Hi, you\'re browsing from an iOS device.');
}

Categories

Resources