The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Implementing an SVG Icon System" Nov 30 - 6:00 PM Eastern

iPhone Catcher

Last updated on:
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{HTTP_USER_AGENT} .*iPhone.*
RewriteRule ^index\.html$ [L]
RewriteRule  ^/$ [L]


  1. Andrew
    Permalink to comment#

    Some implemention instructions would be nice.

  2. Graystatic
    Permalink to comment#

    It looks like all you would have to do is create a .htaccess file on the root directory of the site you would want to redirect for iPhones. Copy the above code into the file and change the fourth line where it says “” to where you would want it to redirect to. And then create whatever alternate page the iPhone would go. Also make sure that on the fith line the “” is changed to your domain.

  3. Rich Bradshaw
    Permalink to comment#

    Remember that the iPod touch probably wants to be redirected as well, and that it’s UA has iPod instead of iPhone…

  4. Ryan Richards
    Permalink to comment#

    thanks for adding the textmate snippet link – thats a classy addition of which i’ve seen nowhere else :)

  5. Richard Rudy
    Permalink to comment#

    I’m thinking this may be useful to serve responsive images if you add the filter for image file types and increase the amount of browsers in the query string, or or just query user agents that contain the string “mobile”

    I know User Agent strings aren’t’ the best way to detect mobile browsers, but realistically people spoofing their user agent string are edge cases

  6. damu
    Permalink to comment#

    cool! this might help serving responsive images as Richard says, saving some bandwidth for visitor and server both.

Leave a Comment

Posting Code

We highly encourage you to post problematic HTML/CSS/JavaScript over on CodePen and include the link in your post. It's much easier to see, understand, and help with when you do that.

Markdown is supported, so you can write inline code like `<div>this</div>` or multiline blocks of code in in triple backtick fences like this:

  function example() {
    element.innerHTML = "<div>code</div>";

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed