I was wondering where the width of the devices configured for the emulator (6.1 - Touch UI / Responsive Layout) are defined. E.g "iPhone 6 Plus" for Geometrixx Media is defined to have a width of 540px. Tracing back the devices that belong to the responsive device group, they live here /libs/wcm/mobile/components/emulators/ios/iphone6plus. But I can't find where the width is configured.
Yes you are correct in saying that for “iPhone6 has a default width of 750 configured but the emulator displays it at 350”. This is because there is one extra property present in cr:emulatorConfig node, called device-pixel-ratio. This node has value of 2. So resultant value would be width/2.
Device Pixel Ratio
The device pixel ratio is the ratio between physical pixels and logical pixels. For instance, the iPhone 4 and iPhone 4S reports a device pixel ratio of 2, because the physical linear resolution is double the logical resolution.
Physical resolution: 960 x 640
Logical resolution: 480 x 320
Samsung Galaxy S III
Actual resolution: 720 x 1280
CSS Pixel Ratio: 2
Interpreted resolution: (720/2) x (1280/2) = 360 x 640
When viewing a web page, the CSS will think the device has a 360x640 resolution screen and Media Queries will respond as if the screen is 360x640. But the rendered elements on the screen will be twice as sharp as an actual 360x640 screen.
And indeed your example works for the iPad, which I hadn't looked at. I've looked at other devices (iPhone6, iPhone6plus, galaxy4... ) where the default width numbers configured don't reflect the with displayed in the emulator. E.g iPhone6 has a default width of 750 configured but the emulator displays it at 375 ...