I am currently looking at some code for PHP detection of mobiles, which is probably quite easy.
Now I just have got one problem - I want to make it possible to make unique view-files in my MVC-framework for tablets, mobiles and web pages. So I need to split the tablet from the rest of the mobile devices.
Currently this is the code, that I am using:
public function isMobile()
{
if(preg_match('/(alcatel|amoi|android|avantgo|blackberry|benq|cell|cricket|docomo|elaine|htc|iemobile|iphone|ipad|ipaq|ipod|j2me|java|midp|mini|mmp|mobi|motorola|nec-|nokia|palm|panasonic|philips|phone|sagem|sharp|sie-|smartphone|sony|symbian|t-mobile|telus|up\.browser|up\.link|vodafone|wap|webos|wireless|xda|xoom|zte)/i', $_SERVER['HTTP_USER_AGENT']))
return true;
else
return false;
}
But this is not enough - the only check is wheter the device is a mobile device - if not it is as standard telling the framework, that we're on a computer. The last part is ok - but I want to make a split of the mobile devices in actual mobiles - and in a secound group, which should be tablets.
I hope, that I have made my wish clear, and I hope, that you have some input in a good way to achieve this.
Thanks in advance.
Here is a class with methods for detecting each platform individually.
https://github.com/serbanghita/mobile-detect
Old question, but here goes my opinion regarding mobile detection.
You state in your question that you want unique files for mobile devices, so I can assume the reason for this is to present a different version of the website for mobile clients and desktop clients.
This approach is OK until a certain point. And that point is called Android. There are ~1.5 million Android devices activated each day with resolutions from 320*240 to 2560*1600, which makes it hard to if {} else for each of them. Even if you try to make a list with most used devices and you try to target only those, it will be hard to support a new device in the future.
My approach a while back was to forget about old method of splitting devices into "mobile" and "desktop" categories and create a new method. And that method consist in "good" and "bad" browsers which is based on browser capabilities. For example, if the browser supports local storage, it will be in "good" category.
Starting from this, I had the possibility to create a "base" version of the website, very basic from a UI standpoint but which will work cross-browser. This base version of the website will present the same content (because that matters at the end of the day) on all devices, will be very small in size (less assets, smaller html) and based on browser capabilities will be enriched on the client side.
So in the end you will end up with a website that has very small footprint (html size and assets), that looks OK cross browser and it will support any new device that comes up on the market without any changes, will load fast even on poor connections and that can be enriched on client side based on browser capabilities.
You can even enrich the webpage based on devices size: if the browser reports a large screen, you can bring in more assets, more ads and make the webpage more beautiful ; if the browser reports is on a small screen, you leave it as is.
Mobile_Detect is a lightweight PHP class for detecting mobile devices (including tablets). It uses the User-Agent string combined with specific HTTP headers to detect the mobile environment. — Read more
http://mobiledetect.net
You can also use a more comprehensive solution like WURFL Cloud, which is a service that detects the capabilities of mobile devices, like is_mobile and is_tablet. There is a free plan for low traffic sites: http://www.scientiamobile.com/cloud
Related
We are developing in-house web-based application for viewing data reports while targeting on smartphones and tablets. Our customer asked us for possibility that only certain devices could access the content. Hence we use technologies based on javascript/HTML5 we are no capable of reading unique ID like IMEI or device uuid. On the other hand side we could use server technologies like ASP, PHP to gain success.
I have several ideas which dont lead to wanted result (one discussed here: Persistent client-side web storage).
I wonder if you have any idea that allow only certain devices to access web site?
Such access control would only be "secure" if a traditional login method is implemented on top of it, i.e. users (1) need to sign in with username and password, but (2) they can only do so on specific devices.
Step (1) is required to make access basically "secure", while step (2) would only make it just a little harder to break into your app for people who have hardly a clue what they're doing.
(Without the second step, people could attempt to brute force the login form when they know its URL, without sniffing any other network traffic.)
You could certainly fingerprint the user agent (UA) string and possibly other HTTP headers, assuming the mobile browser app isn't constantly updated and therefore doesn't constantly change its UA string (that could be a hassle), and check server-sided.
Your could also create a simple, really simple native mobile app for the target platform(s), consisting only of the platform's default web browser widget, with your app's URL built-in as the default page.
You could then control the URLs and possibly HTTP headers, and add special, secret authentication headers or URL parameters (e.g. device's IMEI), for which you check on the server side.
If you target Android, you don't necessarily need to rely on Google Play; you can also distribute the APK files from one of your own servers, making the app available only to the intended audience.
AFAIK you only have the User Agent to work on, with maybe some Javascript values that you can return as are used when fingerprinting.
The User Agent should give you a lot to go on, but it can easily be spoofed. And so can the Javascript values.
I don't think there is a secure way to do what you want. But then again, I don't know if you really want it that secure.
What you also could do is to not do it 100% browser based, but create a mobile App. (Such as in Apple AppStore / Google Play Store) Here I think you can request access to more variables to identify the machine type.
Try the lightweight php-mobile-detect here: (server side checking is always better) https://code.google.com/p/php-mobile-detect/
I'm working on an in-house project management web based application that needs to support mobile devices as well as desktop.
It's built with Symfony2, jQuery, HTML5.
Are there any performance comparisons between using WURFL as opposed to responsive design, both on server and client side? Specifically I'm thinking about rendering times, HTTP calls (it's quite AJAX heavy).
Performance-wise, responsive design places the entire load on the client so you should ensure that this works adequately well by testing on many devices. Not all smart phones are created equal—some have slow CPUs that make JavaScript code and media queries painfully slow. Overall, using server side code can result in a much lighter experience for the client, while also allowing you to exercise a finer level of control over the experience.
But before you think about the performance aspects of this you should consider if this approach will deliver an adequate mobile experience at all. There are two important aspects of a mobile version of a site that you should aspire to:
A contextually appropriate experience—it should be able to deliver an
appropriate experience for someone using a mobile device. This may be
quite different to an appropriate experience of the same service on a
desktop. Note that use of a mobile device does not necessarily imply
mobility—mobile device users are often physically immobile but users
may nonetheless prefer to interact with your site or service in a
different way when using a mobile device. The importance of a
contextually appropriate experience is increasing dramatically as the
number of ways that we interact with the web is increasing: a
lean-forward experience that seems appropriate on a laptop may feel
entirely incorrect on a television browser that you interact with
from across a room.
A device-sensitive experience—it should be
capable of delivering an experience that works well on the devices
used by your website customers. This range of addressable devices is
increasing all the time, and growing more diverse, from feature
phones to televisions. Some are held close to the face, others are
interacted with from across a room. It is next to impossible to
deliver a satisfactory experience on such a wide range of devices,
each with their own input/output restrictions and conventions,
without tailoring the experience to the device. The major internet
brands are keenly aware of this and doing much more of it than may be
apparent—even the seemingly simple Google homepage masks vastly
different code behind the scenes served to different devices used to
achieve a useful experiences across the device landscape.
Used as a means to deliver both a desktop and mobile site, however, responsive design falls short on delivering both desired aspects of an ideal mobile site.
It cannot deliver a contextually appropriate experience because it
delivers the same experience regardless of the device that people are
using (this limitation may not be an issue for sites with restricted
use cases)
It can deliver a device-sensitive experience only to to a
limited range of devices, since the core technique limits the range
of devices that can be targeted to smartphones and other high-end
devices. The one-experience-fits-all issue and limited range of
addressable devices may not be a problem for all websites—some sites
don’t lend themselves well to mobile-specific experiences and equally
some site owners may not have a desire to serve a wide range of
devices.
It is worth noting that responsive design has an unknown impact on mobile SEO since it is not clear whether or not search engines will identify the content as being mobile-friendly and rank it accordingly in mobile searches.
Any logic that can be determined and acted upon on the server side can reduce data transfer and client side overhead. Reducing the size of the content sent - e.g. relevant CSS, JavaScript, HTML and optimised images - will clearly put less of a burden on the client.
A RESS based solution (i.e. Responsive Design + Server Side Components - http://www.lukew.com/ff/entry.asp?1392) will always have the opportunity to be faster that a responsive design solution on its own. You will always need to consider significance of "faster", but when I'm seeing (perhaps poorly designed) responsive design sites out there delivering 1Mb+ of content to a mobile device the performance optimisations they could gain from a little bit of server side intelligence are immense. Good white paper on why performance of web site matters from gomez # http://www.gomez.com/resources/whitepapers/why-web-performance-matters/ and why every second counts.
A few examples on how server side feature detection can help are listed at http://www.opendeviceknowledge.com/discovery including how responsive design and server side world can play together.
WURFL inventor, here. Ronan Cremin appears to have addressed the question rather extensively. At the end of the day, is a question uf usability vs cost (both development and maintenance).
The only other thing I want to point out is that WURFL and Responsive Web Design need not be separate worlds. This and this posts have my viewpoint on the subject.
More interestingly, we recently launched a service that make some of WURFL also available to Javascript developers free of charge. I advise you check out http://wurfl.io/ site.
In a nutshell, if you import a tiny JS file:
<script type='text/javascript' src="//wurfl.io/wurfl.js"></script>
you will be left with a JSON object that looks like:
{
"complete_device_name":"Google Nexus 7",
"is_mobile":true,
"form_factor":"Tablet"
}
(that's assuming you are using a Nexus 7, of course) and you will be able to do things like:
if(WURFL.form_factor == "Tablet"){
//dostuff();
}
This is what you are looking for.
Thanks
I'm in need of a way to detect mobile browsers server-side. I'd like a way that requires me to do little to set up and little to maintain, yet still provide me with accurate detection of (at the VERY least) Android, Mobile Safari and Blackberry browsers, along with alternatives like Opera.
I'd like to have at least the majority of the mobile market covered, and I'd really prefer virtually all of the market if it doesn't take much.
WURLF is the ultimate way for mobile browser detection and a PHP API is available.
I found this one to be very easy to use php-mobile-detect
(edit: for now the Browser Capability Project is closed, i.e. atm this answer is not an option)
All you need is get_browser() and a recent browscap.ini that maps the user-agent string to a browser/version and its capabilities.
You can get a usually very up-to-date browscap.ini version from http://browsers.garykeith.com/downloads.asp
Its just a matter of reading the headers ( How do I read any request header in PHP ) and parsing / interpreting this to read the "user-agent", you may be able to find an existing PHP script or maybe just plain regex that will help in figuring out which user-agents are mobile and which are regular pc's / laptops.
There are a lot of different headers, as it indicates the operating system, so as many different mobile OS'es as there are there would be user-agent headers so the script needs to have a list of all valid ones.
http://en.wikipedia.org/wiki/List_of_user_agents_for_mobile_phones
Found this library a little while back:
http://code.google.com/p/mobileesp/
Has PHP, Java, JavaScript, and C# versions. I see it as a "lightweight" smartphone/tablet detection tool without dependencies and is regularly updated. I have mixed feelings about it though as some aspects of the code quality are a bit shaky.
If you need something even lighter-weight, the WP Super Cache plugin for WordPress contains some long regex strings you could probably swipe.
Browser sniffing based on user agent strings is always going to be flaky. I looked at WURFL and it is several MB compressed. Using that is overkill. A better approach is to detect the top devices in use on the website, design for those devices, and then call it a day.
A quick Google search picks up these:
http://mobiforge.com/developing/story/lightweight-device-detection-php
http://code.google.com/p/php-mobile-detect/
Zend Framework introduced Zend_Http_UserAgent lately.
It can determine the Mobile Device and it's capabilities by detecting the UserAgent through Wurfl, TeraWurfl and DeviceAtlas API.
How about http://code.google.com/p/hdapi/ ? Server side mobile detection in PHP.
Unfortunately WURFL is not free anymore for commercial projects.
But there is OpenDDR with its experimental PHP implementation.
I once used to store temporarily visitors' ip-addresses and csrf-session values (meant to count current visitors).
And I noticed that I had a side-gain of being able to see if the visitor used a mobile or a PC: The csrf of a mobile changes with every new page load, a PC doesn't; and the ip-addresses remain in both cases.
Sure, you only detect a mobile if a visitor clicks twice and I have not checked how reliable this is (as I do not really need it), but it is php/server-side only.
It seems like facebook has this mastered, I've checked a bit into WURFL but this seems like an extremely expensive process. I've also checked out: url link. While it has a good list of user agents, I'm trying to identify which are smart phones and which are not.
facebook pushes the non-smart phones to a different site than their smart phones. Trying to see if there was an easy way to do this.
You should look into Tera-WURFL which is basically WURFL serialized data in a MySQL database. Much better performance than XML WURFL.
There is also another mobile device db out there: Device Atlas.
What you could do is find the lowest common denominator for smartphones, then create your own stripped down version of WURFL / Device Atlas which would be far less resource intensive and faster to check, and go from there.
Screen size should be a somewhat reliable indicator. Non-smarts tend to have less than 320x240 resolution, though I'd check some older smartphone models to be sure.
Try wurfl-php-1.4.2.0
$isPhone = $device->getCapability("can_assign_phone_number");
$isSmarty = $device->getCapability("device_claims_web_support");
If it is a phone and smart, it is a smartphone.
If it is a phone and it is not smart, it is a non-smartphone
Is there a good way to identify a cell phone or any other mobile device (which may be subject to a limited data plan) through the user agent or similar, easily accessible methods?
Yes: WURFL, the Wireless Universal Resource File: "The WURFL is an XML configuration file which contains information about capabilities and features of many mobile devices."
You'd want to look in the User Agent for specific browsers and keywords like 'Mobile', 'Skyfire', etc. That should be a pretty reliable way. You'd want to do a Google Search for Mobile Browser UserAgents. Someone probably has made a list.
I think you cannot be certain of the exact phone used in many cases because many phones share the same user-agent string (and even use the same browser). BUt you can certainly narrow the possible candidates enough as to serve tailored content.
Check these related questions as well
Auto detect mobile browser (via user-agent?)
How can I redirect mobile devices to a different URL?
Standard way to detect mobile browsers in a web application based on the http request
The iPhone UA signature is:
/Apple.*Mobile.*Safari/