How To Test Site In Motorola G In Chrome Emulator?

I am testing my site in all the mobile emulator in chrome. Here moto g emulator is not available. My testing team is saying issue in the moto g. Can some one help how to test for

Solution 1:

I don't think Mibit has it quite right. While the Moto G may have a screen resolution of 720 x 1280, websites don't display at this resolution.

The CSS spec defines what's called a reference pixel, which allows devices with high density displays to show the same content at a similar size as displays with a lower pixel density. The reference pixel is used for all CSS and website rendering, and determines the viewport size.

The viewport size of the MotoG3, for example, is 360x640. The device pixel ratio is 2, which means every css pixel that the web sees is actually 2 physical screen pixels wide, or represented by 4 physical pixels. This is why the correct emulator settings for chrome to emulate a MotoG3 is:

Screen Size: 360x640px

Device Pixel Ratio: 2

User Agent (Can vary depending on browser): Mozilla/5.0 (Linux; Android 6.0.1; XT1540 Build/MMB29U) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/51.0.2704.81 Mobile Safari/537.36

To show the difference between using the physical screen resolution and the reference pixel resolution in the emulator, the following screenshots show what google looks like in both of these configurations:

You can clearly see that using 360x640px and a DPR of 2 correctly emulates what should show up on a phone screenn

Solution 2:

The only thing the "emulator" does is emulating screen resolution and pixel dimensions.

Customize the screen settings:

Click the values and adjust them. The Moto G has a reolution of 720 x 1280 pixels and set the pixel dimension to 2 or 3.

Custom Device

You can add a custom device if you find an edge-case or niche device. Just do the following:

1. Go to the DevTools Settings.
2. Activate the Devices tab.
3. Click on the "Add custom device" button at the bottom of the panel.
4. Fill in the form that appears at the top of the list.
5. Press "Add Device"
6. Enable Device Mode and find your custom device in the device menu.

But keep in mind that the "emulator" does have limitations - you cannot test everything regarding:

• Device Hardware
• Browser UI
• Browser Functionality
• App Cache

Solution 3:

You might want to take a look at something like Mobilizer from http://mobile1st.com so that you're testing pages on real devices, not emulators, as emulators are often showing inaccurate results.

Some of the main issues with emulators:

-A "Keyhole Problem" happens when the site isn't zoomed to fit the phone and still has all of the same content. This makes mobile users feel like they're looking at your site through a keyhole.

-A lot of responsive testing sites use iframes to emulate devices. Unfortunately, many sites have settings that prohibit the browser from rendering them in an iframe, resulting in a blank screen.

-Different browsers and operating systems render default elements, such as buttons and scrollbars differently. While the differences can be minor, they could have a huge effect on your UX.

-It's becoming increasingly popular for websites to have video. However, a lot of phones don't have the player installed (i.e. flash) or have a hard time playing it with the default browser.

-With responsive design taking off a lot of companies have abandoned having a separate mobile site. However, there are some mobile-only sites out there and emulators often give the wrong version.

Hope that's helpful.