Start learning with our library of video tutorials taught by experts. Get started

Mobile Web Design & Development Fundamentals

Using server-side detection with PHP


From:

Mobile Web Design & Development Fundamentals

with Joe Marini

Video: Using server-side detection with PHP

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.
Expand all | Collapse all
  1. 2m 48s
    1. Welcome
      1m 2s
    2. Using the exercise files
      1m 46s
  2. 29m 25s
    1. Understanding the mobile context
      8m 5s
    2. A survey of mobile sites
      11m 44s
    3. Targeting mobile browsers
      4m 31s
    4. Previewing a complete mobile site
      5m 5s
  3. 27m 20s
    1. Designing for one web
      3m 43s
    2. Using well-defined web standards
      3m 45s
    3. Designing mobile-friendly pages
      3m 40s
    4. Being crisp, clean, and succinct
      5m 45s
    5. Minimizing input where possible
      6m 47s
    6. Focusing on the core scenarios
      3m 40s
  4. 1h 13m
    1. Installing the tools
      3m 52s
    2. Setting up a local web server
      9m 13s
    3. Installing device emulators
      17m 5s
    4. Using device emulators
      13m 9s
    5. Downloading Modernizr and Mobile Boilerplate
      6m 22s
    6. Building a first mobile web page
      5m 43s
    7. Developing mobile pages with desktop browsers
      8m 6s
    8. Exploring useful mobile web development resources
      10m 23s
  5. 53m 26s
    1. Reviewing mobile markup languages
      5m 10s
    2. Understanding content adaptation approaches
      10m 32s
    3. Controlling the viewport layout
      12m 50s
    4. Designing forms
      13m 30s
    5. Using CSS media queries
      11m 24s
  6. 1h 11m
    1. Detecting client capabilities with script
      10m 8s
    2. Caching information with local storage
      9m 16s
    3. Determining position with geolocation
      12m 52s
    4. Minimizing HTTP requests with data URLs
      7m 39s
    5. Understanding user agent detection
      9m 8s
    6. Using server-side detection with PHP
      6m 52s
    7. Using server-side detection with ASP.NET
      4m 54s
    8. Using HTML5 Boilerplate for mobile
      11m 6s
  7. 39m 22s
    1. Measuring performance
      7m 41s
    2. Creating full-screen web apps
      6m 30s
    3. Customizing the user interface
      5m 14s
    4. Detecting orientation changes
      3m 58s
    5. Detecting device movement
      5m 21s
    6. Using touch events
      10m 38s
  8. 47m 14s
    1. Taking a look at the finished site
      7m 40s
    2. Examining the header and background image style on the Home page
      10m 10s
    3. Examining the hover effect and layout styles on the Tours page
      6m 42s
    4. Examining mobile forms on the Contact page
      9m 45s
    5. Viewing and testing the mobile site on emulators
      8m 11s
    6. Viewing the site on devices
      4m 46s
  9. 2m 34s
    1. Goodbye
      2m 34s

Watch this entire course now—plus get access to every course in the library. Each course includes high-quality videos taught by expert instructors.

Become a member
Please wait...
Mobile Web Design & Development Fundamentals
5h 47m Beginner Jul 20, 2011

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.

Topics include:
  • Implementing well-defined web standards
  • Working with Modernizr and Mobile Boilerplate
  • Building a first mobile web page
  • Understanding content adaptation strategies
  • Designing forms for mobile
  • Detecting client capabilities with script
  • Using server-side detection with PHP and ASP.NET
  • Working with mobile browser capabilities
  • Viewing and testing the mobile site on device emulators
Subjects:
Developer Web Web Foundations Mobile Web
Software:
HTML
Author:
Joe Marini

Using server-side detection with PHP

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.

Share a link to this course
Please wait... Please wait...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.
Upgrade now


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ.

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

join now

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed Mobile Web Design & Development Fundamentals.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferencesfrom the dropdown menu.

Continue to classic layout Stay on new layout
Welcome to the redesigned course page.

We’ve moved some things around, and now you can



Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

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.

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked