Joomla & WordPress Tutorials, Info, Discussion, Tips | GavickPro Blog

How to Get a Mobile View in Your Web Browser?

For testing purpose, you will occasionally need to see the mobile view of your Joomla Template in your Web browser. Mobile interfaces are usually very small and so their dimensions of the display must be adjusted.

A user agent is a small text description of your device sent with every web request.

When you visit a webpage, in theory each browser sends an identifiable User-Agent string to the server hosting that site. The Web server can detect the type of browser you are using and, based on that information, serve up different content. This is the reason why iPhone and Android users see special mobile-version websites when they browse the Web. If we could know what User-Agent is sent by each Web browser, then we could easily identify the mobile browsers. In the example below, Safari or Firefox is the user agent. The browser sends this information via the User-Agent HTTP header every time it makes a request to any site.

The User Agent Switcher extension adds a menu and a toolbar button to switch the user agent of a browser, between different user agents. User Agent Switcher overrides browser’s default user agent, tricking websites into thinking you’re using a different browser. The extension is available for Firefox and Chrome and will run on any platform that this browser supports including Windows, OS X and Linux.

After selecting the user agent, remember to refresh the browser.

The extension allows the user to configure the list of user agents. The defaults are provided purely as examples. There are many websites which list mobile browser user agents from you can download additional user agents and import XML data file.

Viewport testing tools

Viewport relates to the content area within the browser window, excluding the toolbars, tabs, and so on. More succinctly, it relates to the area where a website actually displays. If you use Firefox, there’s Firesizer (https://addons.mozilla.org/en-US/ firefox/addon/firesizer/) and Chrome users should check out the aptly titled Windows Resizer (https://chrome.google.com/webstore). Similar option has also Web developer.

This solution is the best way to ensure that your Mobile Joomla! Template works fine and will not throw any unexpected errors.

Share