Develop Reference

Detect Mobile PHONE with Javascript or JQuery

I am not interested in Tablets or mobile devices. Just if the user is visiting the page with a phone.
I am not looking for something 100% perfect. But a best effort would be nice. If I show a sms 'a' tag link and you are NOT on a phone... it's not the end of the world but I would like to do the best I can.
Any ideas on how to specifically try to filter out for phones even if it is not 100% perfect?
Thanks

There are perhaps a couple of approaches you could take to this - both would be making massive assumptions and be unreliable at best!
The first approach would be a responsive media query. You could presume that a mobile phone has a screen size greater than x and less than y. For example:
#media only screen and (min-width: 320px) and (max-width: 600px) {}
I'd improve on that to also check for a height, and find some statistics on common device sizes to put sensible breakpoints in there. You also need to account for device orientation, when a device is landscape orientated it'll be wider than usual.
Your other option is to use the user-agent string. Both Apple and Android devices specifically state if it's a mobile version of the device. On iOS you can look for the phrase 'iphone'. On android you can look for 'mobile safari'. Windows phone, and other devices likely have similar detects, you'd need to use emulators to examine each UA string and then construct a suitable regex.
A final possibility, if you're interested specifically in the device's ability to handle telephone operations might be to run a detect against a telephone number.
Create an element on the page that contains a phone number. In iOS (and likely similarly on other platforms), this will get modified so it has an automatic href added with tel: and then your number. You could draw this element off screen, see if the number gets auto-formatted, and presume a mobile phone if so. I imagine an iPad will also do this, but then an iPad will also allow you to send SMS if you have text message forwarding enabled.

I'd suggest doing it server side if you want to manipulate the view for the end user, however I wrote a small JS library that enables this sort of checking a while back - take a look: https://github.com/dj10dj100/what_browser
Along other things you'll be able to check if the browser is a mobile using js :
if(what.device.isMobile() == true){
//Mobile device
}

if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
// some code..
}

Responsive Design for 1 ASP.NET Webpage - Detect Screen Width

I have an ASP.NET Web Forms Website that has css code to detect whether or not the screen width is less than 420 pixels. The client now wants this version (under 420 pixels) to function very differently than the full screen site, so I figured I could redirect to a mobile version of the website by detecting on the server side how wide the browser is. I am using 51Degrees to check Request.Browser.ScreenPixelsWidth, but that always returns the same value, even on my phone. Is there a better way to detect this information so that I can load a mobile version of my webpage?

If you want to get device-width, user-agent is not very helpful, because ultimately you need screen resolution and that will be the sole criteria to manage UI. So when more devices will come into market, you need to store their useragent and their dimension, this way, i am saying it is not helpful. And what if user has mobile or tablet, and changes orientation, means dimension just got changed for same user-agent.
So best way would be to go with css media queries to start with. There are lot of CSS to help you out for responsive design , such as bootstrap.

You're mixing two different technologies. For responsive design, you never need to use browser agent sniffing. Use a RWD CSS framework like Bootstrap. With RWD you serve the same content and functionality to ALL devices.
This really sounds like an argument to develop a separate mobile app if there's some part of it that need different functionality. Outside of that, the client is an idiot and it is frequently our job to educate the client ;-)

Detect specific iPad model via Javascript?

I'm looking to detect a specific model of iPad via Javascript (iPad v. iPad 2 v. iPad Mini v..., etc).
This information is not contained in the user agent. Some iPads have Retina, some don't.
If possible, the ability to distinguish iPhone types as well would be helpful.
Is this possible?

To detect retina display use window.devicePixelRatio.
To detect iPad version use data at UA. Watch this answer. This list of iDevices UAs would helps you to find solution. As you see each model has it's own build number, you can use it for your purposes.

I don't think there's any way to detect a specific iPad model
But you can use CSS query to apply styles for retina devices, like
#media (-webkit-min-device-pixel-ratio: 2) {
background-image: url(bg_#2X.png);
}
Hope it helps.

How to identify device to make separate css for iPad and Galaxy Tab?

My web application has to support multiple devices. I have written common css for all mobile pad devices, but it is giving some issues on iPad. I found the fix specifically for iPad.
Now I want to separate out css for iPad and galaxy device.
Is there any way to in media queries or any other way to load one css for ipad and another for galaxy device ?

You can do combinations using media queries to detect the device and target your CSS. Devices have a specific set of properties (resolution, orientation, width, height etc.) which you can use media queries to pick them out. Here's MDN's reference and another article for further reference, as well as a similar question

The only media query you can use is the one ask about the size of screen if this isn't enought for some reason (maybe screens are same size or you must know the model) you can work with this script to identify the device and load the relevant css according to the device.

You can very simply detect http request user agents for iOS devices like iPad or iPhone, by comparing them with regular expressions, and include relevant CSS accordingly.
A simple regular expression to detect iPhone/iPad would be :
(iPhone|iPad).*?OS ((\d+)_(\d+))(?:_(\d+))?

if, by 'the fix specifically for iPad', you mean a fix to the installed Safari instance - you should use feature detection.
it's most easy to do so using a designated JS library, i prefer Modernizr.

How reliable is detecting mobile devices by screen resolution?

This sounds a bit too good to be true, so please tell me if it is.
If I have just one single version of a mobile website (no variations for
different devices, just one website for all mobiles), how reliable it is
to detect mobile devices by screen resolution?
And simply serve the mobile version if screen resolution is < than say 400px.
NOTE: My question assumes that javascript is enabled. Also,I'm aware there's
user agent detection, but I'd like to do without it.

Javascript mobile device screen detection for height is not reliable at all. The problem is that different browsers use different amounts of 'chrome' and different OS versions use different heights for the system bar. All the detection mechanism report unreliably for height (screen.height, window.outerHeight, window.innerHeight - etc,etc)
Width seems to be most reliable on window.outerWidth across all OS's.
Read a most excellent analytical report here:
http://www.tripleodeon.com/2011/12/first-understand-your-screen/

You will want to look into serving different stylesheets via media queries. You can use queries to identify screen widths and only serve certain css to certain devices. For example this query would serve a iphone.css only to devices identified as having the typical dimensions of an iphone:
<link media="only screen and (max-device-width: 480px)" href="iphone.css" type="text/css" rel="stylesheet" />
There's a detailed article on this subject over at alistapart
Bear in mind though that not all devices recognize media queries. If you need to support lots of older devices like blackberry's and flip phones you should take the advise above for using UA detection - I know it feels wrong if you're coming from the desktop development world but really we have to use the tools we have available to us and Mobile Web is a growing but in many ways still a new horizon.

I came here because I had the same idea and question, and similar situation - the website already requires JavaScript and I'm doing a one-size-fits-all mobile web app, at least for now. Our release cycle is really long - any UA detection I hard-code will be somewhat obsolete by the time the code is tested and released. Since the purpose of this alternate interface is to make it work on smaller screens, it would seem to make sense to use that test.
I don't know however, what size I would pick - I have a hunch mobile devices are not bound (even by convention) to particular screen dimensions. I guess we just have to decide at what point the main web page is no longer functional.
I can understand other people's hesitation to this approach because sometimes there are other issues with a standard site on a mobile device than just the screen size. However, I think there is an advantage to this kind of detection. If your only issue is the screen size, I think it is a good way to go.

Probably not going to hurt to add this functionality to your website for those who are indeed running JavaScript enabled web browsers on their mobile devices. As for those who are not, well there's little you can do about them, other than something simple like letting them select their screen size at first load? Maybe a simple drop down list with possible sizes?

It depends on what you want to achieve.
If you design for different screen resolutions regardless of device type then it is fine to use resolution ranges.
If you design for specific device types (phone, tablet, etc.) and assume a resolution range will always match a single device type, then it will eventually break.
You used a 400px threshold in your example, the Galaxy S8+ reports 412x846 with this code:
console.log("width: " + screen.width + ", height: " + screen.height);
Device resolutions change every year and they are starting to overlap with each other. Large phones have higher resolutions than small tablets and large tablets have higher resolution than some desktops.
You may get away with it if you just want it to mostly work or if you want to detect specific phones.
However it is not reliable to use screen resolution alone to detect the device type.