Change Device Width in Emulator | Community
Skip to main content
D
doeringa
New Participant
October 16, 2015
Solved

Change Device Width in Emulator

  • October 16, 2015
  • 4 replies
  • 2776 views

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

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by kautuk_sahni

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

4 replies

kautuk_sahni
kautuk_sahniAccepted solution
Employee
October 16, 2015

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

Kautuk Sahni
D
doeringaAuthor
New Participant
October 16, 2015

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
kautuk_sahni
Employee
October 16, 2015

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

Kautuk Sahni
D
doeringaAuthor
New Participant
October 16, 2015

Awesome! Thanks Kautuk!

Terms & ConditionsAccessibility statement

Loading footer...