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
Related
I'm working on a web application that should always be visible on the tablet that opens.
To achieve this, what I have done is to use the 'Pin Screen' function of Android so that users who use the tablet do not leave the web application.
The problem that sometimes users leave in this way pressing the security keys.
For this reason I would like to know if there is any way from Javascript to know if the browser is pinning or not and thus be able to notify it on the server.
I am working on a webapp. I want to count the number of Users that added my webapp to home screen.
suppose my website is.
http://www.example.com
I have added meta tags that allow Mobile users to add it to home screen. I want a count of users that downloaded my webapp. If User has downloaded even if he has not opened that then also I should get notification that User has added it to home screen.
So I need any event that should work when an Webapp is added to home screen.
My webapp is in HTML5
First of all, officially it's not possible, as per the official FAQ:
How can I detect if the app is running as an installed app?
You can’t, directly.
which is again re-iterated
Best practices
Do not prompt the user to add your app to the homescreen. There is no way to detect if the app is running installed or not.
Source: https://developer.chrome.com/multidevice/android/installtohomescreen
You could do some manual checking of the screen sizes though on page load, as chrome can't go fullscreen by hand, but do not rely on this (though for statistical purposes it might be interesting).
Another clarification which might be useful, the application is not downloaded when it's added to the homescreen. All that happens is that a 'link' will be created to chrome with certain parameters. By design little information is disclosed to developers regarding this process to prevent companies from forcing users to 'install' webapps before they would function.
As of 2018, according to https://developers.google.com/web/fundamentals/app-install-banners/:
To determine if the app was successfully added to the user's home screen after they accepted the prompt, you can listen for the appinstalled event.
window.addEventListener('appinstalled', (evt) => {
app.logEvent('a2hs', 'installed');
});
I have a desktop and adaptive (with media query in css) design of site. How can I show desktop version of my site if user come to it from mobile gadget? There is only idea in my head:
Set up cookie (for example siteVersion = mobile) previously.
If user choose desktop version (via clicking button, link...however) set up this cookie to "desktop" and after refresh page load css with desktop design.
Does anyone have other ideas? Maybe someone has someexperience with it?
So, what #jared gotte said - "adaptive" implies a web page that can adapt to the device capabilities without having to serve up different content from the server. So in that regard your question is a bit nonsensical.
But, that said, the way most [large] sites handle serving different content to mobile .vs. desktop is by setting up different subdomains. For example Facebook uses www.facebook.com for the desktop version of the site, and m.facebook.com for the mobile version. When a user first hits the site, the server looks at the User-Agent header to decide what type of device they're using and redirects them appropriately. If/when you want to switch them between the two on the client, you can use JS to redirect their browser.
The caveat to this is that you'll need to setup the DNS hostname(s), and make your server code aware of the Host header on incoming requests.
Put your desktop CSS in one CSS file. Put your adaptive stuff in another CSS file. Serve both to the user. But then if a user says "show me the desktop version", stop serving them the adaptive CSS file.
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.
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");
}