Can JavaScript and Liquid integrate for screen width detection?

Technical Q&A
3

I put the function in the main theme js file and i put a thing like this in my section but it doesn’t work

[in the theme.js file ]
// detect the screen width
$(document).ready(function(){
var windowWidth = $window.innerWidth();
if( windowWidth < 767 ){
{% assign MobileScreen = “YesMobileScreen” %}
else {
{% assign MobileScreen = “NoMobileScreen” %}
}});

[In the liquid section]

{% if MobileScreen == “YesMobileScreen” %}
{%- render ‘product-images’,
section_id: section_id,
product: product,
isModal: isModal,
image_position: image_position,
product_zoom_size: product_zoom_size,
product_image_size: product_image_size,
thumbnail_arrows: thumbnail_arrows,
thumbnail_position: thumbnail_position,
video_looping: video_looping,
video_style: video_style
-%}
{%- endif -%}
{% if MobileScreen == “NoMobileScreen” %}
{%- render ‘product-images-2’,
section_id: section_id,
product: product,
isModal: isModal,
image_position: image_position,
product_zoom_size: product_zoom_size,
product_image_size: product_image_size,
thumbnail_arrows: thumbnail_arrows,
thumbnail_position: thumbnail_position,
video_looping: video_looping,
video_style: video_style
-%}
{%- endif -%}