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..
}
Related
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 ;-)
I am having a issue when I try to make a web app responsive to screen-size.
I have css that I want to use for smartphones (iPhone, Andriod, blackberry, windows phone), and also have CSS I want to use for tablets.
My test devices are an iPad 3 (768 x 1024) and blackberry 10 (768 x 1280). and the widths being the same is an issue because my css starts with:
#media screen and (max-width:768px){
//enter code here`code here
}
Because the blackberry has slightly better resolution, it renders the CSS I don't want to use for it. Is there another way I'm suppose to check the media type? I was wondering if there is a way to check the width with a measurable distance (cm or in). not sure how to solve this.
thanks in advance
The “pixels” that are used in CSS declarations and when the browser reports the screen size of the client device have nothing to do with the actual real-world pixels on a device's screen. The “pixels” that are used in CSS are essentially an abstract construct created specifically for us web developers. To concern your self with the actual amount of real-world pixels on a high-resolution mobile screen is, for most web applications, completely unnecessary and will only lead you to utter madness.
You can determine the browser and device type by inspecting the navigator.userAgent property in JavaScript. For example, to test for (practically) any mobile device:
// if mobile === true, 99% chance the device is mobile.
var mobile = (/iphone|ipad|ipod|android|blackberry|mini|windows\sce|palm/i.test(navigator.userAgent.toLowerCase()));
You can of course inspect navigator.userAgent to determine if the user is on a specific type of device or browser that you are particularly concerned about or having a problem with.
But again, in my personal experience, clever, simple, and flexible responsive CSS design (supported by media queries and JavaScript, too, of course) will render beautifully on 99% of device/browser combinations without having to resort to inspecting navigator.userAgent to create different styles for individual devices.
You can also restrict your styles to the height:
#media screen and (max-width:768px) and (max-height:1024px){
// iPAD
}
You should add the meta tag viewport in your html header :
<meta name="viewport" content="width=device-width, initial-scale=1">
To sum up :
width = device width x pixel density
(Galaxy S4 : 1080 = 360 x 3)
This metatag allow you to catch the device width instead of the "faked width" (360 instead of 1080)
Some good reading :
https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag
http://screensiz.es/phone
http://www.html5rocks.com/en/mobile/mobifying/#toc-meta
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.
If I use the following to detect iPad Safari user, will it work if in future, I try to detect a Motorola Xoom or other tablet user, which might have similar widths.
<link rel="stylesheet" media="all and (min-device-width: 481px) and (max-device-width: 1024px)" href="ipad.css">
I mean how exactly will I identify the other tablet and use xoom.css or othertablet.css
I know the user-agent approach, but would want to avoid that. Please let me know if it is possible to implement using media queries only?
No, you can't tell what specific device is being used based on media queries (and you shouldn't need to as they are all converging on the same standards)
We are starting to develop using Formfactor detection libraries such as FormfactorJS - note, I created this.
The theory being using the same semantic HTML, you can specialize your CSS and Javascript using for a given class of device (smartphone, tablet, desktop etc) whilst also being cognizant of responsive design to individual device profile using Media Queries.
The good thing at least, is that you can specify your own detection algorithms, so you can detect different types of the same class of device (i.e, iPad or Xoom). We chose to do this through userAgent checking in this case. Why? because depending on the formfactor or device type you might want to offer optimised experiences.
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.