Viewers: in countries Watching now:
This course surveys the core principles and techniques essential to building web sites for mobile devices. Author Joe Marini introduces the mobile context, sheds light on its unique coding requirements, and discusses interface design techniques that enhance existing sites for mobile viewing. The course shows how to approach designing for mobile form factors such as smaller screens and finger-based interaction, along with how to incorporate CSS3 and HTML5 capabilities, such as geolocation, local storage, and media queries.
So, in this example we are going to see how to do some simple server-side user agent detection using PHP. I've got my DetectTestPHP.php file open here in my code editor, and I've got a PHP file over here called detect_mobile_ua.php, and this is the file that we are going to fill out and will be working on. So let's go back to the main code, and let me show you what I am doing here. So if you don't know PHP deeply, you are not familiar with it, you should be able to follow along, because I am not really doing anything all that complex here.
All I am doing here at the top of file is including my detect_mobile_ua.php file, and that's going to contain the code that does all of the user agent detection. And inside that file, I have a function called detectMobileUA, which returns a result, which will be saved aside in this variable here called ismobile. And you can see that's right here. That's detectMobileUA. Right now, it's just returning false because we haven't written the testing code yet. So when the page loads, the detectMobileUA function will be called, the result will be stored in here, and then that's used down here.
So here in the code I've got some text that describes the example. And have a paragraph right here that echoes out the user agent string. It just says, "The user agent string is," and then it's using the PHP echo function to just write out the user agent, which is one of the several variables available to you in PHP on the server side. So it does that. And then in the next block of code we check to see if the ismobile variable is true and if it is, we just write out an h2 tag that says, "This appears to be a mobile browser." Otherwise, "This is not a mobile browser." So let's go ahead and save that.
And without making any changes, let's go ahead and run it in the emulators right now to see what happens. So you can see I've got it running key here in the Android browser, and the result right here says, "Hmmm... not a mobile browser," and it shows you the user agent string. So here is the user agent string that came in from the Android browser. You can see the Android keyword right there, and there's the WebKit keyword, and here is Mobile Safari down here. And let's bring up Opera Mobile. So Opera Mobile is passing in its user agent string, and there is the Opera Mobi keyword right there that identifies the Opera Mobile.
But you see it says, "not a mobile browser," because again the function is returning false right now. Here is the Windows Phone emulator. Same idea. Here is the user agent string, and you can see it's passing in MSIE 9 with Windows Phone OS and IEMobile/9. But again, because the variable is returning false, it says it's not a mobile browser. So let's go back and fix the code to do user agent detection properly. Here we are back in the code. So here I am in my mobile detect logic, and over in the snippets file I've got my server-side detection PHP code right here.
And all I am going to do is copy these lines, and I'll explain each one. So we copy, and we'll paste it, and we will save. Here is what this logic is doing. The logic is the first getting the user agent from the HTTP user agent variable that's available in the server variables in PHP. And then I am just going to go ahead and look in that string for various keywords that will identify mobile devices. So for example, if the user agent string contains the token ipod or contains iphone then I know that this is a mobile device running iOS.
Right now, all I am doing is returning true because all I care about is whether it's mobile or not. Same thing with the user agent for Android. And just to be clear, the stripos function is testing this string to find this sub-string in it. And if it returns a value that's not equal to the Boolean false then I know that this string exists in there. So I do test for iPod, iPhone, Android. Opera Mobi is what uniquely identifies the Opera Mobile browser. For Windows Phone, I look for the string 'windows phone os' along with the token for iemobile. And then for Mozilla, for Mobile Mozilla, I just look for the keyword fennec because that's the code name for the Mobile Mozilla browser.
So all I'm really doing here is scanning the user agent string for these tags, and I want to point out that this is not intended to be an industrial-strength commercial-grade user-agent-detection script. For purpose of example, it's just showing how to look inside the user agent for various kinds of data. So let me go ahead and save, and I am going to copy this back into my web site. So that this guy right here, and I'll copy it into my web server folder, and I'll copy it and replace it.
So now when I go back out to each one of these emulators, the result should be different. So I am going to go ahead and refresh this page. And you can see now that it says, "This appears to be mobile browser," because it's finding the Android keyword inside the mobile user agent. Let's do the same thing here in Opera. I'll refresh. You can see that when I refresh, since the Opera Mobi keyword is in there, the result is that this does appear to be a mobile browser. And finally, we'll do the same thing on Windows Phone. And you can see that the result is again now coming back saying, "This appears to be mobile browser." Why? Because Windows Phone OS is in the user agent and IE Mobile is there.
And just last but not the least, let's try this on the desktop and bring up IE. And let's go ahead and type. And you can see that here the user agent is MSIE. But since it doesn't contain the Windows Phone OS, or IE Mobile keywords, the result is that this is not a mobile browser. Whereas the emulators reported that they correctly were mobile browsers. So you can see that using the user agent in PHP, it's possible to look for keywords that identify mobile browsers and take action based upon the results.
Now we could have gone a little bit further and done more advanced things like redirect the user to other pages, specific pages for specific phones, and so on and so forth; but the basic intent of this example was to show you how to take PHP code, look for things in the user agent, and then make a decision to tell whether the browser is mobile or not.
There are currently no FAQs about Mobile Web Design & Development Fundamentals.
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.