Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
BedrockMission!

Learn More

View all

Sign in to view all badges

Change Device Width in Emulator

Avatar

Avatar
Validate 10
Level 2
doeringa
Level 2

Likes

3 likes

Total Posts

54 posts

Correct Reply

0 solutions
Top badges earned
Validate 10
Validate 1
Boost 3
Boost 1
View profile

Avatar
Validate 10
Level 2
doeringa
Level 2

Likes

3 likes

Total Posts

54 posts

Correct Reply

0 solutions
Top badges earned
Validate 10
Validate 1
Boost 3
Boost 1
View profile
doeringa
Level 2

15-10-2015

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

Accepted Solutions (1)

Accepted Solutions (1)

Avatar

Avatar
Establish
Community Manager
kautuk_sahni
Community Manager

Likes

1,167 likes

Total Posts

6,281 posts

Correct Reply

1,144 solutions
Top badges earned
Establish
Coach
Originator
Contributor 2
Contributor
View profile

Avatar
Establish
Community Manager
kautuk_sahni
Community Manager

Likes

1,167 likes

Total Posts

6,281 posts

Correct Reply

1,144 solutions
Top badges earned
Establish
Coach
Originator
Contributor 2
Contributor
View profile
kautuk_sahni
Community Manager

15-10-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

Answers (3)

Answers (3)

Avatar

Avatar
Validate 10
Level 2
doeringa
Level 2

Likes

3 likes

Total Posts

54 posts

Correct Reply

0 solutions
Top badges earned
Validate 10
Validate 1
Boost 3
Boost 1
View profile

Avatar
Validate 10
Level 2
doeringa
Level 2

Likes

3 likes

Total Posts

54 posts

Correct Reply

0 solutions
Top badges earned
Validate 10
Validate 1
Boost 3
Boost 1
View profile
doeringa
Level 2

15-10-2015

Awesome! Thanks Kautuk!

Avatar

Avatar
Establish
Community Manager
kautuk_sahni
Community Manager

Likes

1,167 likes

Total Posts

6,281 posts

Correct Reply

1,144 solutions
Top badges earned
Establish
Coach
Originator
Contributor 2
Contributor
View profile

Avatar
Establish
Community Manager
kautuk_sahni
Community Manager

Likes

1,167 likes

Total Posts

6,281 posts

Correct Reply

1,144 solutions
Top badges earned
Establish
Coach
Originator
Contributor 2
Contributor
View profile
kautuk_sahni
Community Manager

15-10-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

Avatar

Avatar
Validate 10
Level 2
doeringa
Level 2

Likes

3 likes

Total Posts

54 posts

Correct Reply

0 solutions
Top badges earned
Validate 10
Validate 1
Boost 3
Boost 1
View profile

Avatar
Validate 10
Level 2
doeringa
Level 2

Likes

3 likes

Total Posts

54 posts

Correct Reply

0 solutions
Top badges earned
Validate 10
Validate 1
Boost 3
Boost 1
View profile
doeringa
Level 2

15-10-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