5

Previously I was using google chrome emulation tab to verify that my HTML/JS page renders properly in various devices. Recently when I got ipad and started to check with it, I found that the way the page actually looks on the real device is noticeably different than in chrome emulator (which does not surprise me).

I do understand that there is no way to mimic device to 100% in chrome emulator and in most of the emulators. My question is to what extent can I trust google chrome emulator tab?

Please note, that I am not looking for oneliners like "use real device, not emulator", neither I am looking for suggestions of particular services like browserstack. I am looking for insights from folks who already have some experience with UI/JS validation for different devices and can share when is it applicable to use chrome emulator and when can it fail and it is better to use native emulator or even a real device.

Community
  • 1
  • 1
Salvador Dali
  • 214,103
  • 147
  • 703
  • 753
  • 2
    I use emulators up to the point where it matters, then I only trust devices and native browser installs. When does it matter? For me, before it goes to client. Before it goes live. It takes too much time to dev constantly looking at a device, but it is reasonable to put that extra time in once you believe it is ready for device testing. Yeah, you can lose some time in the minor adjustments, but never so much that means you're radically redoing anything. – Kai Qing Apr 08 '14 at 01:37

1 Answers1

4

The chrome device emulator is only setting chrome to match these basic device specifications:

screen dimensions, pixel ratio, touch support, user agent string

It does nothing to specifically emulate the actual browser that is present on the device. So for example, if you find deviations between Chrome and Safari on an OsX desktop, you can expect Chrome "emulating the iPad" to continue to behave like Chrome did and the real iPad to more likely behave like Safari did.

For an iPad there are a lot of differences even a simple page is likely to expose; these are long separated webkit forks with separate cosmetics such as useragent builtin CSS. But even Android devices (pre-5.0) have a builtin browser with minimizations tuned to mobile, customizations by a vendor, and some old version of chrome's webkit.

Sites like caniuse.com show differences in support for different features between browsers, so anytime your chrome version and your other browser don't match on a feature you can expect mismatched "emulation". (But browsers that share the same support can also always be subtly different in aspects that are not entirely defined by the specifications.)

lossleader
  • 13,182
  • 2
  • 31
  • 45
  • Good points, but do we have any other emulator which gives us the same result as a real device – Hidayt Rahman Sep 18 '19 at 10:19
  • @HidaytRahman Depends what you have for a desktop. Android Studio is free for most platforms, while Xcode is available on OsX. Both have pretty accurate emulators aside from some aspects of feel and performance or at least much more accurate than chrome's emulation. – lossleader Sep 18 '19 at 10:32
  • Installing android studio just to test web application is not a good idea – Hidayt Rahman Sep 18 '19 at 10:37