P
P
Pavel Baranov2019-10-28 00:19:17
css
Pavel Baranov, 2019-10-28 00:19:17

Define mobile CSS styles for a third-party element on a site loaded asynchronously (AJAX)?

Hello. I am developing (improving) the site as part of my project and regularly encounter the following problem: there is a third-party widget (for example, an online chat) installed on the site by adding their script. The script asynchronously, apparently through AJAX, loads the DOM elements of the widget and its styles. At the same time, these elements and styles are not visible through Ctrl + U, but are visible through Firebug or F12. Thus, you can see that the script was eventually uploaded, BUT not for mobile phones. More precisely, if the script introduces elements and styles based on the Width of the device - there are no problems, narrow the browser and run firebug - everything is visible. But there are scripts that determine the device according to other criteria and narrowing down the browser will not solve the problem, since the script loads DOM elements and styles for computers.
As a result, the question is: how can you fully simulate viewing the site, as from a mobile device, and at the same time see the entire site code, taking into account the one loaded asynchronously via AJAX?
Thank you!

Answer the question

In order to leave comments, you need to log in

1 answer(s)
R
Rustam Bainazarov, 2019-10-28
@JohnG0ld

For the test, I take the OZON website, which downloads the mobile version based on the user-agent, and not on permission. There are several ways, but if in short and with the help of Chrome or Firefox, then ...
Chrome:
Firefox:
Well, after all of the above, look at the resources that have loaded. Also, in the responsive mode there are a lot of extras. options for finer tuning, if needed.

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question