Anyone who has done some web development or web design work has faced web browser compatibility issues. The earlier versions of Internet Explorer are known to cause many problems with the way they render web pages. One work around for these issues is to create separate pages for each web browser and direct the user to the web page designed for her browser. Let's look at how we can use the Apache module mod_rewrite so that when a user visits a browser dependent page on your website you can have her automatically directed to the page designed for their web browser.
You will need to have Apache up and running with the mod_rewrite module properly configured and tested. Please refer to my previous article covering this. You will also require access to various web browsers to test things out. You should try to get your hands on to a machine running Internet Explorer, Mozilla Firefox, and Opera.
In this exercise, we will use Apache's mod_rewrite module to help us redirect users to browser specific pages using Apache's built-in capability to figure out which browser the user is using. This is done using something called browser user agents. This information is part of the HTTP header. If you have access to your web server's access logs, you should be able to see entries such as the following in the logs.
For this exercise, you will need to create three separate HTML documents, one for each web browser. Create a new directory under the DocumentRoot of your Apache installation called test. In this directory, create three files, index-mozilla.html, index-opera.html, and index-IE.html. Enter the following code into the first file:
Enter similar lines to the other two files replacing the name of the web browser in each file. Now create a file named .htaccess in the same directory as the html files you just created. Enter the following into the file, replacing https://www.example.com/test/ in all lines with the correct domain name or IP address along with the path of your files:
Each rewrite rule is made up of two lines. The first, RewriteCond, is where we will define the rewrite condition. This is where we define the criteria that mod_rewrite should use to find what we are asking it to find. The second entry, RewriteRule, is where we tell mod_rewrite what to do with the URL once we detect a case that fits the rewrite condition. In this case we ask mod_rewrite to check the Apache variable %{HTTP_USER_AGENT} and see if it matches the string next to it, such as Opera, or MSIE, or Mozilla. If mod_rewrite finds a matching case it transfers the URL to the second portion of the rule which then forwards the user to the page that we have set in the rule.
If you set this up correctly, and a user using the Mozilla Firefox web browser hits the URL https://www.example.com/test/index.html, mod_rewrite will check and find that the HTTP header contains the term Firefox in it. The user will be forwarded to https://www.example.com/test/index-firefox.html and the words "Welcome Mozilla Firefox User" should appear in her browser. You can also use these kinds of mod_rewrite rules to deal with mobile phone browsers and other devices that have a different way of displaying web pages.
Original: July 15, 2009
Find a programming school near you