This test adapts to the device that you run it on. Ideally, therefore, you need to access it from an appropriate device (iPhone, iPad, Android phone or tablet) to get 100% fidelity of rendering.

You can run it from a desktop browser but if you do you will need to take some steps to make it work properly at all, and when you do you may find that there are slight rendering differences (because, for example, Windows machines do not normally have the Helvetica Neue font available).

One way to run it on a desktop browser is:

  1. Use Chrome.
  2. After going to the URL (which will load badly) press F12 to get the developer tools active. A pane should open at the bottom of the browser window.
  3. Click on the cog icon at the very bottom right of the browser window. A dark overlay dialog should open. Go to the overrides tab, and select the user agent, device metrics and emulate touch events checkboxes.
  4. To emulate an iPad select 'iPad - iOS 5' in the user agent dropdown list. Similarly, to emulate an Android device select one of the 2 in the list. To emulate an iPhone select 'iPhone - iOS 5' AND manually set the device metrics to 320 x 480.
  5. Now that the emulation setup is configured RELOAD the test_Header.html page. You need to do this every time you change the settings above.
  6. Use the <=> button next to the device metrics to switch between portrait and landscape.