Change Device Width in Emulator

[doeringa]

Hi, 

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. 

Any help is greatly appreciated :)

Thanks, Alex

[kautuk_sahni · Accepted solution]

Hi Doeringa

Yes we can configure the width of the device.

Please follow the below mentioned steps:-

1.Let say we want to change the width of IPAD. So go to /libs/wcm/mobile/components/emulators/ios/ipad (in CRXDE lite)

2.Click to ipad’s cr:emulatorConfig node.

3.Here we can watch the property Height and Width with their values. We can change these values and after saving them. Please reload the webpage and changes would get reflected.

Note: - Please resort them to correct value for future purpose.

Reference for creating custom Emulator: - https://docs.adobe.com/docs/en/cq/5-6-1/developing/emulators.html

I hope this solves your problem.

Thanks and Regards

Kautuk Sahni

[doeringa]

Hi Kautuk,

Thanks for your quick reply.

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 ... 

Is this being overwritten somewhere?

Thanks for your help, Alex

[kautuk_sahni]

Hi Doeringa

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

Example

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.

I hope this answers your question.

Thanks and Regards

Kautuk Sahni

[doeringa]

Awesome! Thanks Kautuk!