If you are a WordPress developer, you have surely fought with WordPress cross-browser compatibility issues. In this tutorial I will show you how to overcome many of the common issues that arise with some of the more common web browsers and devices while working with WordPress. This tutorial is aimed at more advanced WordPress users. Common users are not likely to run into nearly as many cross-browser compatibility issues due to the fact that these issues are dealt with in the WordPress core. More advanced WordPress users who develop custom themes, templates and/or plugins are very likely to run into many cross-browser compatibility issues however because they work within the core to develop more customized WordPress sites.
Mobile Phone and other device detection for WordPress
The way I normally go about checking for mobile phones and other devices in WordPress is very similar to the method I use for browser detection. the code also goes in the header file after the opening head tag. I like to place it towards the top directly after my browser detection code. Here is what I use:
Using the above code is fairly simple. To see if the user is on any mobile device use this:
To check if user is on a BlackBerry:
To see if user is using an iPhone or iPad:
To check for IE Mobile devices:
Finally, to see if the user is on an android phone:
There you have it! Not too difficult even for the novice, learning WordPress guru. Just replace the alert with whatever code you need to implement for each device and you are all set.
In the above example we grab a variable number of table elements from within the WordPress loop using their class name. We then loop through the array of tables and dynamically change the width of each. This is just one example of browser or device specific changes you might need to implement while customizing a WordPress blog to suit you or your client’s needs. The same strategy can be used for an array of divs or any other element that has a class name and more than one instance on the page.
Using Separate Style Sheets for Different Browsers or Devices: