Определить мобильные CSS стили стороннего элемента на сайте, подгруженного асинхронно (AJAX)?

Question

[Павел Баранов]

Здравствуйте. Занимаюсь разработкой (доработкой) сайта в рамках своего проекта и регулярно сталкиваюсь со следующей задачей: есть сторонний виджет (например, онлайн чат), установленный на сайт путем добавления их скрипта. Скрипт асинхронно, видимо через AJAX, загружает DOM элементы виджета и его стили. При этом эти элементы и стили не видны через Ctrl+U, но обозримы через Firebug или F12. Таким образом видно то, что в итоге закачал скрипт, НО только не для мобильных телефонов. Точнее если скрипт вносит элементы и стили исходя из Width устройства - проблем нет, сужаешь браузер и запускаешь firebug - всё видно. Но есть скрипты, определяющий устройство по другим критериям и сузить браузер задачу не решит, так как скрипт подгружает элементы DOM и стили для компьютеров.
В итоге вопрос: как можно полноценно сэмулировать просмотр сайта, как с мобильного устройства, и посмотреть при этом весь код сайта, с учетом подгруженного асинхронно через AJAX?
Спасибо!

Answer 1

[Rustam Bainazarov]

Для теста беру сайт OZON'а, который загружает мобильную версию, исходя из user-agent'a, а не по разрешению. Есть несколько способов, но если вкратце и с помощью Chrome или Firefox, то...

Chrome:



Firefox:



Ну и после всего вышесказанного смотрите те ресурсы, которые загрузились. Так же, в режиме отзывчивости там много есть доп. опций для более точной подстройки, если надо.

Comments

[Павел Баранов]

Да!!! Удалось, но только через Firefox с эмуляцией сенсорного ввода. В Chrome (которым я и пользуюсь) нет данной эмуляции и данный виджет Jivosite отображался как на компе. Громадное спасибо за решение и User agent. Теперь буду использовать этот термин вместо "анализирует другие факторы" :)

[Rustam Bainazarov]

Павел Баранов, в Chrome тоже должно быть всё в порядке, смотрите внимательнее, я в Chrome кучу раз JivoSite ловил.

Кстати, поправьте метку сложности вопроса, т. к. это не углубленные, а достаточно базовые знания.

[Rustam Bainazarov]

Павел Баранов, ну вот, например, всё работает и JivoSite грузит стили для мобильных устройств успешно:




Без режима адаптивности грузит версию для десктопа, как и должен:

[Павел Баранов]

Рустам Байназаров,

в Chrome тоже должно быть всё в порядке, смотрите внимательнее, я в Chrome кучу раз JivoSite ловил.

. Я разобрался почему не отображает в chrome. На сайте, где стоит виджет не прописан viewport (да и такое бывает, особенно если сайт написал я :) ). В общем где

<meta name="viewport" content="width=device-width, initial-scale=1">

и подобное - порядок и в Chrome.

Кстати, поправьте метку сложности вопроса, т. к. это не углубленные, а достаточно базовые знания.

Она заблокирована для редакции.

[Rustam Bainazarov]

Павел Баранов, ну, тогда ничего страшного, главное, что разобрались.