I plan to have a completely separate layout/design for a desktop Vs tablet user. My app is based on Java.
My questions are;
1. What is the best approach to detect whether the request is coming from desktop or tablet (iPad/Xoom, etc)
2. Can this be handled at server-side and not through JS user-agent string?
A live example of redirect is if one tries to access Yahoo. i.e. if the request comes from a desktop browser, we’ll be redirected to www.yahoo.com , while if the request comes from a tablet device like iPad, we’ll be redirected to www.yahoo.com/tablet
I am planning something along the Yahoo example. Not sure how they have implemented it.
I know some of you might be thinking that I should just control 2 separate CSS like desktop.css and tablet.css and detect through CSS media query OR JS user-agent. But the point is the layout/design is so different between the 2 that I just cannot control only via CSS and that is the reason, I plan to have a separate tablet version of my web app and do the redirection.
Please let me know as much suggestions that you can.
Thanks in advance for your help on this.
You have to check for the user-agent string within your HTTP request. Based on that you will be able to identify the device -- provided that the user has not altered the user-agent string sent from the device browser.
I've had to deal with pretty much the same issue, having to differantiate between Desktop or Not-Desktop. I went with a client-side detection using JavaScript. I'm using RequireJS in my solution, and here's my module:
define(function(){
var isTouchDevice = function() { return window.screenX === 0 && 'ontouchstart' in window || 'onmsgesturechange' in window; };
var isDesktop = !isTouchDevice() ? true : false;
return isDesktop;
});
I've added the variable isDesktop for readability.
Related
I am working on PWA and need to figure out whether the user is accessing through IOS or Android or Desktop.
This is to be done as according to the user we will be showing the particular URL to the user.
So, how can we figure out this?
You could check and parse the User-Agent HTTP header?
It feels quite the normal thing to do according to the title of your question.
Basically User Agent doesn't allow you to be 100% sure that user uses exactly that browser, but for 90% of cases it works pretty well.
I'd suggest you to consider using a library like sniff-fns or any other similar, so there covered most of the cases
I have website link at which I have designed a html/javascript web app. I used iOS and Android app to create an app that encapsulates the web app.
Is there a way to block access to the website link and only allow access to the website link only thru the native apps calling the link.
In short safari, IE, Chrome must not be able to access the link, but the iPhone & Android app should be able to access it.
Is there some way to tell that the app is accessing the site and not the phone or pc browsers.
I am sure there a number of ways to implement this.
Thanks,
It depends on how is the web app implemented. Since native Web Views are pretty much the wrapper for the standard browser (Safari/Chrome), you will find it tough to filter it based on that.
What you can do, however, is to add an extra GET variable (for ex. &ref=youruniquecodehere) or a custom User-Agent, based on which you will be able to identify, whether your application authorized the request (with a proper access code) or if it's a generic request using browser.
However, both of these options can still be bypassed if researched, although it'd require slightly more time. Not sure whether a solution that would work in 100% of cases exists.
Hope that helps, please correct me if I'm wrong.
I am in the proccess of making a site, i want a desktop version and a mobile version. What javascript code do i need to put into my html code to detect what device is viewing the page and if it was a mobile redirect it to my mobile verson of the site? my second problem is how to make a link back from the mobile site to the desktop site?
The best way would be to do it at the server level, or back-end level before it even reaches the user. It's a bad user experience to land on a web page, wait for it to load the javascript and then redirect again.
Jayesh answer should work, however In the future it might be handy to design responsively (content that automatically scales to the users screen size) to minimize loading times and maximize efficiency!
There is lots of help on this,
It is done by checking user agent property,
String userAgent = request.getHeader("User-Agent");
you can visit,
Detecting Device Type in a web application
My client has very specific request. He wants to block all "classic" computers (desktop/notebook).
So if I access the website from iPhone, Android or tablet it displays everything (the different resolutions I can hadle via responsive design). But when somebody from Mac or Windows or Linux (I know that Android is also based on gnu/linux ;) ) access the web, he gets only a message that "this web is only for mobile devices"or something like taht.
But I am not sure how to "ban" mac os, win, linux etc.
Could javascript(jQuery) library e.g. Modernizr or other do such specific condition "just mobile devices"?
What about Windows 8 :( ?
i am really thankful for any advice, because I have never had such request before?
I think you could do this in several ways.
Either you check via javascript, but then you if somebody would turn off javascript you would be screwed again because they could take a look at the website:
if( /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent) ) {
// some code..
}
or you could check it via modernizr, but I don't know exactly how to do it in modernizr and you would also have the problem of turned off javascript code,
or you could download a script that is suitable for your case via:
http://detectmobilebrowsers.com/
another thing you could do is checking the screen resolution but, then we are back at the javascript case.
According to MSDN, Windows adds Tablet PC to the browser user agent if it is a tablet.
I suggest not doing this via javascript, because as states above: if javascript is disabled, people will be able to visit your site.
I want to check whether the user is viewing my site from a mobile device or PC. If it's a mobile device, I want to redirect my site URL like Google does...
If possible I would like to implement this in JavaScript. How can I do this?
You typically use the User-Agent header to detect the browser.
Here's JavaScript code that does basically that (only for mainstream browsers though, you'd have to add the Mobile User-Agents)
http://www.quirksmode.org/js/detect.html
And here's a list of mobile browser identifiers
http://www.zytrax.com/tech/web/mobile_ids.html
The list is not complete and will never be, given the rate new mobiles appear on the market, but what I did back when I did it is to store all received user agents in a database, and then look for them to classify them as mobile and which brand/model.
What you can't rely on though is JavaScript, it's better done in server code (not all mobile browsers execute JavaScript).
There is a related question here on SO but I couldn't find it.
See this existing question.
You will have better luck doing this server side, as many mobile browsers don't even support JavaScript. Basically you want to check the user agent and compare to a list of known mobile browsers.
Here is a simple answer for this query. This won't detect the mobile browser, but it redirects the page to our mobile.html page, through the following script;
Find out the browser window size and redirect it..
winWidth=document.all?document.body.clientwidth:window.innderwidth;
if (winwidth<800)
{
window.location.replace("mobile.html");
}