How can you test the mobile version of your website using a desktop browser? With mobile browsing at 10% worldwide, your cannot ignore mobile traffic anymore. Luckily, both Joomla and WordPress have mobile plugins to convert your website into a mobile version. Also, many WordPress and Joomla templates come with a mobile version. But if you need to modify the CSS design for your mobile version, you need to use a desktop browser like Firefox with Firebug, or Safari or Chrome developer tools so you can see the CSS rules you need to modify.
Luckily, with Firefox and Safari desktop versions, you can select the user agent for iPhone so you can see your mobile template.
Change User Agent in Safari
To change the user agent in Safari, from the menu, select Develop > User Agent > iPhone. Once you select iPhone as the user agent, reload the web page in which you want to view the mobile version and the page will display the mobile version.
IMPORTANT: The web site must have an active mobile template for this to work.
Change User Agent in Firefox
To change the user agent in Firefox, first you need to install the following plugin: User Agent Switcher. To install this plugin, in Firefox, from the menu select Tools > Addons. In the search field, enter: User Agent Switcher. Install this add-on. Activate the User Agent Switcher plugin and restart Firefox.
To change user agent, from the Firefox menu select Tools > Default User Agent and select iPhone. Once you select iPhone as the user agent, reload the web page in which you want to view the mobile version and the page will display the mobile version.
IMPORTANT: The web site must have an active mobile template for this to work.