Mobile Browser Emulation (Mozilla, iPhone & More)

What the User Agent String Actually Means

The User Agent is a string that is passed by a desktop or mobile browser along with an HTTP(S) request for any web page on the Internet. The string contains specific information about the software and hardware of the device that makes the request, the specific technology used to access a website, webpage, or other online content. The user agent string is unique to each web user. This information usually includes details about the browser name, web rendering engine, native platform (e.g. for mobile browsers, iOS, Android, Amazon KFTHWI, Windows Phone 8, BB10, RIM Tablet OS, etc.), and the device the browser is running on.

Using the user agent string, you can determine a lot of parameters, for example, in addition to the name of the operating system, its version, and processor type. You can also identify the device running the browser – it can be a tablet, PC, iPad, iPhone, or another mobile device. In addition, the user agent string can contain information about features a web browser supports (such as JavaScript, Cookie, Java Applet, ActiveX, etc.).

You can check the User Agent string that indicates your browser in the Chrome browser by entering:

about:

Once a user entered an URL of a website in a browser, the browser sends its user agent string to the website it tries to connect to. After the user agent is identified on a web server, the server returns suitable content (files, JavaScript, media files) that matches the browser parameters. This way different versions of the same webpage based on the user agent header can be provided to the browser.

However, the main challenge about understanding the user agent string is that the majority of browsers indicate not only actual information about what they are build of but also add what they are compatible with to the user agent string. For example, almost every modern browser reports Mozila/5.0 as a part of its user agent string.

How to read the User Agent string

Since there is no standard format for a user agent string, it can be difficult to read it. However, you can find plenty of guidelines on how to parse and analyze the content of user agent strings on the Internet. Also, you can use online analytical tools (such as whatismybrowser.com) to deal with this challenge.

In this article, we will cover only the basics of the user agent string terminology. Let’s analyze the user agent string with the following content:

Mozilla / 5.0 (iPhone; CPU iPhone OS 8_0 like Mac OS X) AppleWebKit / 600.1.3 (KHTML, like Gecko) Version / 8.0 Mobile / 12A4345d Safari / 600.1.4

The example string contains some commonly used tokens. Let’s have a closer look at what each of the names actually stands for:

• Mozilla/ 5.0, as was mentioned above, is used by modern browsers to let web servers know that a browser is Mozilla compatible. Mozilla is a codename used by Netscape and populated by other browsers in their user-agent strings to be served with the same content as Netscape.
• AppleWebKit is a web rendering engine identifier used on Apple devices and supported by some other types of devices such as BlackBerry.
• KHTML is an engine used by Safari and Chrome.
• Gecko is the engine used in the latest versions of Firefox. The “like Gecko” token is used to be compatible with the websites that serve their content to Geko-based browsers.
• Safari is the token that indicates an actual browser name.

How to Emulate a Mobile Device in a Desktop Browser (Google Chrome)

To view and test a mobile version of you your website, you can use built-in tools that are provided by all modern web browsers. As an example, we will walk you through the mobile browser mode emulation in Google Chrome.

First, start Chrome. In Google Chrome, open a mobile website you need to test. Then click the Customize and manage Google Chrome button (three vertical dots in the upper right corner of the browser window). In the menu, select More Tools < Developer Tools. Or you can use CTRL + Shift + I for Windows, Unix and Cmd+Opt+I for Mac OS.

Then click the Toggle Device Toolbar icon. The browser emulator will be started and device simulation will be activated. As a result, the mobile view of the page will be loaded.

By default, the device toolbar uses a responsive mode for the loaded page. You can select the mobile device you want to emulate for your test: Samsung Galaxy S5, Pixel 2, Pixel 2 XL, iPhone (from version 5 to iPhone X), iPad and iPad Pro. The mobile device page reloads as if you were using the smartphone or tablet that you have selected from the list.

When you’re done, simply close the Google Chrome developer tools to return to the standard desktop view.