Emulate browsers, screen sizes, and GPS locations

  • Artigo

Use the Emulation tool to test how webpages work with different document modes, user agents, screen sizes and resolutions, and GPS location coordinates.

Testing early and testing often

Designing and developing for the modern web means building webpages that work on a wide range of devices and platforms. Using the Emulation tool in F12 developer tools, you can emulate different environments that your webpages can be viewed in. This makes it easier to catch and debug issues early in the development cycle.

The tool is split into three sections, Mode, Display, and Geolocation:

  • Mode: Test the document mode, desktop vs. Windows Phone browser profiles, and use User agent string emulation to debug errors caused by browser sniffing.
  • Display: Emulate different screen sizes and resolutions to see how webpages render.
  • Geolocation: Simulate a GPS receiver and enter GPS coordinates to test location-aware features in a webpage.

New in Cumulative Security Update for Internet Explorer (KB2976627), whenever any of these options are changed from the defaults, the Emulation tool icon in the F12 sidebar will have a small informational alert icon overlaid on it to let you know that some portion of your browser's behavior is being emulated.

Mode

Document mode

F12 tools in Internet Explorer 11 has simplified the complex matrix of browser and document modes from earlier versions into a single option: the document mode.

Six options are available. Edge (Default) represents all the latest standards and features IE11 supports. The other five options represent Internet Explorer versions 5 (a.k.a. "quirks"), 7, 8, 9, and 10. When you pick a version other than IE11, IE11 renders webpages as if you were using that version of the browser. It even changes the default user agent string the browser is sending. You can manually set a different string using the User agent string menu in the Mode section.

It's worth noting that the Document mode is an emulation of the older browsers. It can be really useful, but if you need pixel-perfect layout or to be sure your pages look and work a certain way in older versions of IE, we suggest going to Modern.ie and downloading their virtual machines with older versions of IE. The virtual machines work with virtualization environments for Windows, Mac, and Linux, so you get the most accurate and trustworthy platforms for testing and debugging in older versions of IE and Windows.

New in Windows 8.1 Update, when the Document mode has been changed from the default, you'll be shown a reason why. Here's a quick list of the reasons with explanations:

New in Cumulative Security Update for Internet Explorer (KB2976627), the Document mode is available as a drop-down menu in all tools.

If your webpage is not displaying in the Document mode you expect, you have cleared any manual changes from the Emulation tool, and you are not shown one of the Document mode reasons from the list above, it may have been assigned a different Document mode by your enterprise IT department. Please see the information on Enterprise Mode below.

Browser profile

If you want to see how your webpages perform on a Windows Phone 8 device, the browser profile selection helps you change a variety of settings to emulate a Windows Phone 8 device quickly and easily, then change back to the default Desktop profile just as easily.

New in Windows 8.1 Update, Enterprise is added as a browser profile option. This option is only shown to users of enterprise versions of Windows 8.1 Update, and only when visiting webpages specified by their IT administrators. When this option is selected, IE11 behaves like Windows Internet Explorer 8.

See Enterprise mode for more info.

User agent string

Changing your user agent string is a good first step in debugging errors that are only happening in IE, but not in other browsers. It's basically a way of telling IE to identify itself as a different version or even another browser.

Front end and/or back end scripts sometimes try to detect which browser you're using. And even when you're not using browser detection in your own code, you may be using a third-party JavaScript library or server-side script that does.

The problem with browser detection is that it's often used to scale back or change the features in a webpage based on what the developer writing the script thinks your browser can do, rather than detecting what your browser can actually do using feature detection. This can cause unexpected behavior, because code targeted at Microsoft Internet Explorer 6 runs differently in IE11, or a feature your browser is perfectly capable of supporting might be disabled because of an assumption made by the developer.

If changing your user agent string clears up a problem, it's likely browser detection might be the cause.

Enterprise Mode

Starting with Windows 8.1 Update, Enterprise Mode is added to IE11.

Enterprise Mode is turned on by IT managers using Group Policy settings for specific domains or pages. It's much like the compatibility view settings, but provides Internet Explorer 8 compatibility. Webpages that work in Internet Explorer 8 work very well in Enterprise Mode, aside from some minor known limitations.

IE11 displays the Enterprise mode icon next to the address bar when displaying a page in Enterprise Mode.

To turn off Enterprise Mode on a webpage, change the Emulation tool's Profile drop-down to the Desktop option or toggle the Enterprise Mode option in the Tools menu.

IE11 in Enterprise Mode presents an Internet Explorer 8 user-agent string to servers by default.

For more info about configuring Group Policy or registry values to enable Enterprise Mode for specific webpages or domains, see IT Pro documentation for Enterprise Mode.

As of Cumulative Security Update for Internet Explorer (November 2014), Enterprise Mode's Site List has expanded functionality. A new section of the list lets enterprise IT managers assign any available document mode to a specific site, subdomain, or subdirectory.

When a webpage is assigned a document mode via this new method, the Enterprise Mode icon is not displayed next to the address bar. Enterprise IT managers who use this function are advised to alert the developer-owners of those pages, so there is a minimum of confusion. For more information on this functionality, please see our documentation for IT professionals.

Display

Display emulation helps developers preview their webpages on different screen sizes and different resolutions. It helps identify issues as webpages transition from conventional desktop monitors to smaller mobile screens or newer high-resolution displays.

Important  Emulations are adapted to try and match the physical dimensions of the screens being emulated. Emulated pixels might appear compressed or expanded, and emulation is not recommended if you need to test pixel-perfect positioning of HTML elements. Emulation is, however, good for testing responsive designs and identifying larger element positioning issues.

 

Orientation

The standard options are available:

  • Portrait: the screen is taller than it is wide. This tends to be the orientation for most mobile screens.
  • Landscape: the screen is wider than it is tall. This tends to be the orientation for most laptop screens and desktop monitors.

Resolution

A selection of physical dimensions and resolutions is provided. If none of those meet your needs, you can set a custom size and resolution by selecting Custom from the menu.

Custom sizes of up to 80 inches and 3820 x 2160 are supported.

Geolocation

Many mobile devices make it possible to determine a user's physical location and deliver information or services tailored to that.

There are three options to simulate GPS. They are Off, On, and On but no signal which can be used for testing different device states. When set to On, the latitude and longitude you enter will be provided to your webpage.

Strategies for building adaptive sites

Geolocation API