fix calculation of the height and width as per viewport (for play-only-mode)

[apsinghdev]

fixes: #4493

I believe this is more of a DPR issue because modern devices (like the iPhone XR) have high-resolution screens. The iPhone XR, for example, has a DPR of 2. This means:

The actual screen resolution is 828 x 1792 pixels (logical resolution × DPR).

The logical resolution (CSS pixels) is 414 x 896 pixels.

Here you can see the values of the innerHeight and innerWidth are twice of the actual values.

The issue is the environment we are testing in. If you check the same code on an actual phone or device with a defined height and width, this issue will not arise. Browsers can simulate the width and height of the phone screens but don't match their respective DPR.

@walterbender Please take a look.

[github-actions]

✅ All Jest tests passed! This PR is ready to merge.

[walterbender]

The question is, at what point do we want to transition. It looks to me like the emulated iPhone image you are sharing has sufficient resolution to work with, although not necessarily a pleasant experience.

[justin212407]

The transition point i kept in my PR initially was of a screen width of 759px. Also i have tried using the meta tag in my draft PR itself for the same and this approach does not exactly work.

[github-actions]

This pull request has been open for more than 60 days without any activity. It will be closed in 3 days unless the stale label is removed or commented on.

[github-actions]

Closed pull request due to inactivity for more than 63 days.