Mobile manual visit isnot added to ATF table

[Mai-Saad]

Before submitting an issue please check that you’ve completed the following steps:

• Made sure you’re on the latest version => 3.16
• Used the search feature to ensure that the bug hasn’t been reported before

Describe the bug Manually visiting URL, won't add the URL to the database although the screen size is valid

To Reproduce Steps to reproduce the behavior:

1. 3.16 installed and activated
2. Visit a page in mobile view i.e Samsung Galaxy s8+ (360 x 740) https://e2e.rocketlabsqa.ovh/lcp_bg_samestyle_template/
3. Check ATF table => no entry is added
4. Visit the same page in desktop view then check ATF => desktop entry is added

Expected behavior Mobile visit adds an entry in the ATF table as the separate mobile cache is enabled by default on 3.16 fresh install

Screenshots If applicable, add screenshots to help explain your problem.

Additional context Add any other context about the problem here.

Acceptance Criteria (for WP Media team use only) Clear instructions for developers, to be added before the grooming

• Manual visit adds an entry to ATF if the size is valid for both desktop and mobile (as long as a separate cache is on)
• No entry is added to the database with an invalid screen of both desktop/mobile
• If a separate mobile cache was disabled using a filter then no mobile entry is added by visiting mobile

[MathieuLamiot]

https://wp-media.slack.com/archives/CUT7FLHF1/p1715347251269829?thread_ts=1715341013.827449&cid=CUT7FLHF1

[wordpressfan]

I think that's because the device pixel ratio window.devicePixelRatio To validate that this is the root cause, I changed those two lines of code:

https://github.com/wp-media/wp-rocket/blob/985a76bfcf3d4df0a1dd325b208ed0dd4d071246/assets/js/lcp-beacon.js#L69-L70

to be:

const screenWidth = ( window.innerWidth || document.documentElement.clientWidth ) / ( document.devicePixelRatio || 1 );
const screenHeight= ( window.innerHeight || document.documentElement.clientHeight ) / ( document.devicePixelRatio || 1 );

and the data was sent properly, the thing that I want to validate next is that we need to do the same with each use of window.innerWidth

[MathieuLamiot]

The issue is related to not responsive templates that don't use the viewport meta header.